幫助jquery animate（）

Question

我使用這段代碼來改變不透明度，當用戶打開和關閉一張圖片不幸的是，當用戶點擊圖片時，不透明度不會停留在1.任何人都有答案？

$(document).ready(function(){ 

    $('img#slide').animate({"opacity" : .7}) 
    $('img#slide').hover(function(){ 
     $(this).stop().animate({"opacity" : 1}) 
    }, function(){ 
     $(this).stop().animate({"opacity" : .7}) 

    });     


    $('img#slide').click(function(){ 
    $(this).animate({"opacity" : 1}); 
    }); 

}); 

Answer 1

你需要以某種方式禁用mouseleave動畫用戶點擊時。

一種常用的方法是添加一個類，並且mouseleave檢查該類的存在。

測試活生生的例子：http://jsfiddle.net/KnCmR/

$(document).ready(function() { 

    $('img#slide').animate({ "opacity": .7 }) 

    .hover(function() { 
     $(this).stop().animate({ "opacity": 1 }) 
    }, 
    function() { 
     if (!$(this).hasClass("active")) { 
      $(this).stop().animate({ "opacity": .7 }); 
     } 
    }) 

    .click(function() { 
     $(this).addClass("active"); 
    }); 
}); 

編輯：

如果你想第二次點擊回覆行爲回到原來的，使用toggleClass()代替addClass()：

 $(this).toggleClass("active"); 

---

個

jQuery的文檔：

• .hasClass() - http://api.jquery.com/hasClass
• .addClass() - http://api.jquery.com/addClass
• .toggleClass() - http://api.jquery.com/toggleClass

Answer 2

你只需要跟蹤它是否已被按下。您可以通過幾種方法來完成，但由於您只有一個要跟蹤的元素，因此變量是最簡單的方法。我還優化了您的代碼以利用鏈接。我也改變了你的選擇，以提高效率。 #slide是因爲一個id比img#slide更好的應該是唯一的：

$(document).ready(function(){ 
    var clicked = false; 

    $('#slide') 
    .animate({"opacity" : 0.7}) 
    .hover(function(){ 
     if(!clicked) { 
     $(this).stop().animate({"opacity" : 1}); 
     } 
    }, function(){ 
     if(!clicked){ 
     $(this).stop().animate({"opacity" : 0.7}); 
     } 
    }) 
    .click(function(){ 
     clicked = true; 
    }); 
}); 

Answer 3

所有在這個線程的答案都不錯，而且是可行的。但爲了它，這是一種不同的方法。

根據你的代碼和你的問題，你實際上做的是從元素中刪除懸停行爲。這應該按以下步驟進行：

$(document).ready(function(){ 

    $('img#slide').animate({"opacity" : .7}); 

    $('img#slide').hover(function(){ 
     $(this).stop().animate({"opacity" : 1}); 
    }, function(){ 
     $(this).stop().animate({"opacity" : .7}); 
    }); 

    $('img#slide').click(function(){ 
    $(this).unbind('hover'); 
    }); 
}); 

這可重構允許該行爲的來回切換以一種新穎的方式：

$(document).ready(function(){ 

    var over = function(){ 
    $('img#slide').stop().animate({"opacity" : 1}); 
    }; 

    var out = function(){ 
    $('img#slide').stop().animate({"opacity" : 0.7}); 
    }; 

    var on = function(){ 
    $('img#slide').hover(over, out).one('click', off); 
    } 

    var off = function(){ 
    $('img#slide').unbind('hover').one('click', on); 
    }; 

    $("img#slide").one('click', on); 

    out.call(); 

}); 

注：我沒有測試過這一點（我在工作），但你明白了。