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" />

THE 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);
                }

切换动画类并释放所有其他类

2 个答案: