Question

我创建了自定义切换幻灯片动画。它按预期工作正常，但在第一次点击时不会滑动。如果你点击地图箭头，你会看到切换类将应用于它，但地图不会滑动。但如果再点击两次，它就会滑动。

我对jquery很新，我也搜索了很多，但没有找到任何解决方案。这是代码;

$('.map_btn').click(function() {
    $('.map_btn').toggleClass('toggle');

    $('.map_btn').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 1,
            height: 420
        });
    });
    $('.map_btn.toggle').on('click', function() {
        $('.map_wrapper').stop().animate({
            opacity: 0,
            height: 0
        });
    });
});

http://jsfiddle.net/h2fh6/

Answer 1

除非您需要其他内容，否则只需使用.toggle()。

$('.map_btn').toggle(function() {
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
},function() {
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});

我真的认为他们应该将此功能命名为 toggleClick 。

Answer 2

你可以试试这个

$('.map_btn').toggle(function() {
 $('.map_btn').toggleClass('toggle');
$('.map_wrapper').stop().animate({
    opacity: 1,
    height: 420
});
},function() {
 $('.map_btn').toggleClass('toggle');
$('.map_wrapper').stop().animate({
    opacity: 0,
    height: 0
});
});

Answer 3

以下代码适用于您的图标动画！

http://jsfiddle.net/epinapala/h2fh6/19/

$('.map_btn').toggle(function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 1,
        height: 420
    });
},function() {
    $('.map_btn').toggleClass('toggle');
    $('.map_wrapper').stop().animate({
        opacity: 0,
        height: 0
    });
});

Answer 4

这是我对它的看法，通过缓存被调用的选择器（以及明显的闭包范围，这就是我将$(window).load();放在那里的原因），你将获得更好的整体性能。

如果你是动画，你必须缓存。你必须。不要在重新选择jQuery对象调用（例如$('.map_wrapper').stop().animate()）上反复设置动画。这是低效的，并且只应在必要时进行，就像DOM被修改并需要找到当前状态一样。

如果在按钮上找到effect，我的方法只是使用新设置切换.toggle变量。简单，可靠。随着iframe从Google地图加载，似乎确实存在轻微延迟。这在jsFiddle环境中可能是不可避免的。

$(window).load(function(){
    var $mapbtn = $('.map_btn'),
        $wrapper = $('.map_wrapper');

    $mapbtn.click(function() {
        var $this = $(this),
            effect = { opacity: 0, height: 0 };

        $this.toggleClass('toggle');

        if ($this.is('.toggle')) {
            effect.opacity = 1;
            effect.height = 420;
        }

        $wrapper.stop().animate(effect);
    });
});

http://jsfiddle.net/userdude/h2fh6/21/

Answer 5

您当前的解决方案存在的问题是，这些类在toggleClass()中的某个地方搞砸了，而且您在另一个click内嵌套了.map_btn处理程序{ {1}}同一元素的处理程序。

因此流量变得有些混乱。

你可以试试这个，

click

仅使用$('.map_btn').toggle(function() { $('.map_btn').toggleClass('toggle'); $('.map_wrapper').stop().animate({ opacity: 1, height: 420 }); }, function() { $('.map_btn').toggleClass('toggle'); $('.map_wrapper').stop().animate({ opacity: 0, height: 0 }); });，因此您不必编写2个单独的方法。

小提琴链接 - http://jsfiddle.net/h2fh6/20/

您可以阅读有关切换here

的更多信息

jQuery切换幻灯片动画

5 个答案: