退出功能，並使功能再次工作

我有一些圖像，我希望他們縮放和點擊時更改位置（此部分工作）。
然後，如果我點擊「關閉」按鈕（部分工作 - 「關閉」按鈕在第一次點擊時不會消失），或者如果我點擊「關閉」按鈕，則我希望它們縮小並在再次單擊時返回原始位置點擊屏幕上的任何地方（不知道如何）。退出功能，並使功能再次工作

主要的問題是，當點擊圖像回到原來的位置，沒有圖像是可點擊的，所以我不能使該功能工作多次。

任何幫助，將不勝感激！

的jQuery：

$(document).ready(function(){ 

    var itemImages = $('.foo, .bar, .foobar, .barfoo'); 


    $(itemImages).click(function(){ 
     $(this).addClass("scaled"); 
     $(itemImages).addClass("blur"); 
     $(this).removeClass("blur"); 
     $(itemImages).off('click'); 
     $('.close').fadeIn('slow'); 
     $(this).on('click',itemClicked); 

    }); 
    $('.close').click(function(){ 
     $(itemImages).removeClass("scaled"); 
     $(itemImages).removeClass("blur"); 
     $(itemImages).on('click'); 
     $(this).fadeOut('fast'); 
    }); 

    function itemClicked() { 
     $(this).removeClass("scaled"); 
     $(itemImages).removeClass("blur"); 
     $(itemImages).on('click'); 
    } 
});

CSS：

.blur { 
    -webkit-filter: blur(5px); 
    transition: .5s -webkit-filter linear; 
} 
.scaled { 
    -webkit-transform: scale(2.2); 
    left: 1300px; 
    top: 500px; 
    z-index: 3; 
} 
.close { 
    width: 86px; 
    height:86px; 
    background: url(../images/icons.png) top left; 
    position: absolute; 
    right: 40px; 
    top: 40px; 
    display: none; 
} 
#items img { 
    position: absolute; 
    transition: all .2s ease-out; 
} 
.foo { 
    left: 94px; 
    top: 133px; 
    width: 275px; 
    height: auto; 
} 
.bar { 
    left: 537px; 
    top: 63px; 
    width: 317px; 
    height: auto; 
} 
.foobar { 
    left: 958px; 
    top: 86px; 
    width: 432px; 
    height: auto; 
} 
.barfoo { 
    left: 1556px; 
    top: 77px; 
    width: 270px; 
    height: auto; 
}

HTML：

<section id="items" class="fullscreen"> 
    <div class="close"></div> 
    <img class="foo" src="items/image1.png"> 
    <img class="bar" src="items/image2.png"> 
    <img class="foobar" src="items/image3.png"> 
    <img class="barfoo" src="items/image4.png"> 
</section>

來源

2015-10-13 kaTon

我在這裏創建了你的JSFiddle：http://jsfiddle.net/0pdb84jb/ –

嗯 - 小提琴不是沒有工作 – kaTon

你可以做這樣的事情

$(document).ready(function() { 
 

 
    var itemImages = $('.foo, .bar, .foobar, .barfoo'); 
 

 

 
    itemImages.click(function() { 
 
    if ($(this).hasClass('blur')) { 
 
     return; 
 
    } 
 
    if ($(this).hasClass('scaled')) { 
 
     reset(); 
 
     return; 
 
    } 
 

 
    $(this).addClass("scaled"); 
 
    itemImages.not(this).addClass("blur"); 
 
    $(this).removeClass("blur"); 
 
    $('.close').fadeIn('slow'); 
 
    }); 
 
    $('.close').click(reset); 
 

 
    function reset() { 
 
    itemImages.removeClass("scaled blur"); 
 
    $('.close').fadeOut('fast'); 
 
    } 
 
});

.blur { 
 
    -webkit-filter: blur(5px); 
 
    transition: .5s -webkit-filter linear; 
 
} 
 
.scaled { 
 
    -webkit-transform: scale(2.2); 
 
    left: 1300px; 
 
    top: 500px; 
 
    z-index: 3; 
 
} 
 
.close { 
 
    width: 86px; 
 
    height: 86px; 
 
    background: url(../images/icons.png) top left; 
 
    position: absolute; 
 
    right: 40px; 
 
    top: 40px; 
 
    display: none; 
 
} 
 
#items img { 
 
    position: absolute; 
 
    transition: all .2s ease-out; 
 
} 
 
.foo { 
 
    left: 94px; 
 
    top: 133px; 
 
    width: 275px; 
 
    height: auto; 
 
} 
 
.bar { 
 
    left: 537px; 
 
    top: 63px; 
 
    width: 317px; 
 
    height: auto; 
 
} 
 
.foobar { 
 
    left: 958px; 
 
    top: 86px; 
 
    width: 432px; 
 
    height: auto; 
 
} 
 
.barfoo { 
 
    left: 1556px; 
 
    top: 77px; 
 
    width: 270px; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="items" class="fullscreen"> 
 
    <div class="close"></div> 
 
    <img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg"> 
 
    <img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg"> 
 
    <img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg"> 
 
    <img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg"> 
 
</section>

來源

2015-10-13 06:53:36

太棒了！這工作！這裏唯一的問題是，圖像在縮小並轉到其原始位置（在其他圖像下滑動）之前丟失較高的z-索引。你知道一種方法，讓它保持較高的Z指數，直到它回到原位？ – kaTon

@kaTon您可能必須使用轉換結束事件處理程序 –

好的 - 非常感謝您！我真的很感謝你的答案！ – kaTon

你應該重新綁定click事件，不使用on：

$(document).ready(function(){ 

    var itemImages = $('.foo, .bar, .foobar, .barfoo'); 

    var setClick = function(){ 
     $(itemImages).click(function(){ 
      $(this).addClass("scaled"); 
      $(itemImages).addClass("blur"); 
      $(this).removeClass("blur"); 
      $(itemImages).off('click'); 
      $('.close').fadeIn('slow'); 
      $(this).on('click',itemClicked); 
     }); 
    } 
    $('.close').click(function(){ 
     $(itemImages).removeClass("scaled"); 
     $(itemImages).removeClass("blur"); 
     setClick(); 
     $(this).fadeOut('fast'); 
    }); 

    function itemClicked() { 
     $(this).removeClass("scaled"); 
     $(itemImages).removeClass("blur"); 
     $(itemImages).on('click'); 
    } 
});

來源

2015-10-13 06:49:00 MoLow

問題是，$().on();不能像這樣工作：$(itemImages).on('click');。我想，你試圖扭轉$(itemImages).off('click');聲明。您需要傳遞將附加到on函數的事件處理程序或再次使用click函數。所以，最簡單的方法是在一個單獨的功能來定義事件處理程序，並重新插入：

$(document).ready(function() { 
 

 
    var itemImages = $('.foo, .bar, .foobar, .barfoo'); 
 

 

 
    $(itemImages).click(itemImages_click); 
 
    $('.close').click(function() { 
 
     $(itemImages).removeClass("scaled"); 
 
     $(itemImages).removeClass("blur"); 
 
     $(itemImages).on('click'); 
 
     $(this).fadeOut('fast'); 
 
    }); 
 

 
    function itemClicked() { 
 
     $(this).removeClass("scaled"); 
 
     $(itemImages).removeClass("blur"); 
 
     $(itemImages).click(itemImages_click); 
 
    } 
 
    
 
    function itemImages_click(e) { 
 
    $(this).addClass("scaled"); 
 
    $(itemImages).addClass("blur"); 
 
    $(this).removeClass("blur"); 
 
    $(itemImages).off('click'); 
 
    $('.close').fadeIn('slow'); 
 
    $(this).on('click', itemClicked); 
 
}; 
 
});

.blur { 
 
     -webkit-filter: blur(5px); 
 
     transition: .5s -webkit-filter linear; 
 
    } 
 
    .scaled { 
 
     -webkit-transform: scale(2.2); 
 
     left: 1300px; 
 
     top: 500px; 
 
     z-index: 3; 
 
    } 
 
    .close { 
 
     width: 86px; 
 
     height:86px; 
 
     background: url(../images/icons.png) top left; 
 
     position: absolute; 
 
     right: 40px; 
 
     top: 40px; 
 
     display: none; 
 
    } 
 
    #items img { 
 
     position: absolute; 
 
     transition: all .2s ease-out; 
 
    } 
 
    .foo { 
 
     left: 94px; 
 
     top: 133px; 
 
     width: 275px; 
 
     height: auto; 
 
    } 
 
    .bar { 
 
     left: 537px; 
 
     top: 63px; 
 
     width: 317px; 
 
     height: auto; 
 
    } 
 
    .foobar { 
 
     left: 958px; 
 
     top: 86px; 
 
     width: 432px; 
 
     height: auto; 
 
    } 
 
    .barfoo { 
 
     left: 1556px; 
 
     top: 77px; 
 
     width: 270px; 
 
     height: auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="items" class="fullscreen"> 
 
    <div class="close"></div> 
 
    <img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg"> 
 
    <img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg"> 
 
    <img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg"> 
 
    <img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg"> 
 
</section>

來源

2015-10-13 06:50:44 Markai

如果我點擊屏幕上的任何地方，這仍然是缺失。 –

退出功能，並使功能再次工作

回答

相關問題