切換動畫類，並釋放所有其他

Question

我無法找到一個職位專門針對這個（雖然我敢肯定它的存在，我無法找到它。）

我有這麼一個形象.regularpic切換整體特定的div #title出現在點擊。有沒有更有效的方式讓我的代碼重置其他類沒有所有這些行？

的HTML是這樣的：

<img src="images/wordpress.png" alt="" class="regularpic first" /> 
<img src="images/google.png" alt="" class="regularpic second" /> 
<img src="images/html5.png" alt="" class="regularpic third" /> 
<img src="images/adobe.png" alt="" class="regularpic fourth" /> 
<img src="images/jquery.png" alt="" class="regularpic fifth" /> 

jQuery的是這樣的：

$(function() { 
$(".first").click(
    function() { 
    $(".second, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500); 
    $(".first").stop().animate({opacity:1.0 }, 500); 
    $("#title2, #title3, #title4, #title5").stop() 
              .animate({opacity:0.0, 
                backgroundColor: '#fff', 
                color: '#fff',width: 580, 
                height:50}, 200); 
     $("#title1").stop().animate({opacity:1.0, 
            backgroundColor: '#fff', 
            color: '#000', width: 580, 
            height: 300 }, 600); 
       }); 
}); 
$(function() { 
$(".first").click(
    function() { 
    $(".first, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500); 
    $(".second").stop().animate({opacity:1.0 }, 500); 
    $("#title1, #title3, #title4, #title5").stop() 
              .animate({opacity:0.0, 
                backgroundColor: '#fff', 
                color: '#fff',width: 580, 
                height:50}, 200); 
     $("#title2").stop().animate({opacity:1.0, 
            backgroundColor: '#fff', 
            color: '#000', width: 580, 
            height: 300 }, 600); 
       }); 
}); 

必須有一個更有效的方法沒有？

Answer 1

這要高度重視爲你做它：

HTML：

<img src="src" onClick="mypic('title1')" class="regularpic title1" /> 
<img src="src" onClick="mypic('title2')" class="regularpic title2" /> 

    ... 

<img src="src" onClick="mypic('title5')" class="regularpic title5" /> 

JQuery的：

var current = null; 
function mypic(id) { 
    $('.regularpic').stop().animate({opacity:1.0 }, 500, function(){ 
     $('.title').stop().animate({ opacity:0.0, 
            color: '#fff', 
            height:50}, 500, function(){ 
      if(current !== id){ 
       current = id; 
       $('.'+id).stop().animate({opacity:0.7 }, 500); 
       $("#"+id).stop().animate({opacity:1.0, 
              color: '#000', 
              height: 300 }, 500); 

      } 
     }); 
    }); 
}; 

DEMO：

http://jsfiddle.net/uEjct/4/

希望它能幫助。

編輯：

你需要一個公共類添加到：

#title1,#title2,#title3,#title4,#title5 

在這個例子中：class="title"

Answer 2

使用stop（）方法之前，動畫，然後如果動畫元素，它將停止運行。

 function() { 
     $(".first").stop().animate({opacity:0.7 }, 500); 
     $("#title1").stop().animate({opacity:1.0, backgroundColor: '#fff', color: '#000', width: 580, height: 300 }, 500); 
       }, 

     function() { 
     $("#title1").stop().animate({opacity:0.0, backgroundColor: '#fff', color: '#fff', width: 580, height:50}, 500); 
       }