jQuery切换幻灯片动画答案

【问题标题】：jQuery toggle slide animationjQuery切换幻灯片动画
【发布时间】：2012-06-24 15:53:34
【问题描述】：

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

我对 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/

【问题讨论】：

为什么要在点击后设置$.on()方法？那只是第一次火灾时的二传手。那是你的问题。将它们移出第一个 $.click()。

标签： jquery toggle slide

【解决方案1】：

除非您需要该课程用于其他用途，否则请使用 .toggle()。

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

我真的认为他们应该将这个函数命名为 toggleClick。

【讨论】：

@user1398384 ：我认为这不会改变图标动画（蓝色箭头->切换灰色箭头）。看看我对这些工作的回答。
我不是处理程序中重新查询的忠实粉丝。
@user1398384 - 这不是在按钮上切换 .toggle 类，至少在我的 Firefox 上不是：jsfiddle.net/userdude/h2fh6/23

【解决方案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
});
});

【讨论】：

每次触发时，您都会在必须设置处理程序的查询之上分派两个新查询。在使用范围之上保存、重用、私有范围（参见我的答案以及我如何缓存赢得$.load() 闭包的示例）。

【解决方案3】：

您当前解决方案的问题是，这些类在 toggleClass() 的某个地方搞砸了，而且您已经将 .map_btn 的 click 处理程序嵌套在另一个 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
    });
});

仅使用.toggle()，因此您不必编写 2 个单独的方法。

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

您可以阅读更多关于切换here

【讨论】：

太好了。很高兴听到:-) 请接受任何有助于回答您问题的答案。将来会鼓励人们帮助你。这就是 SO 的工作原理 :-)

【解决方案4】：

下面的代码应该适用于您的图标动画！

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

【讨论】：

【解决方案5】：

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

如果您正在制作动画，则必须进行缓存。你必须。不要在像$('.map_wrapper').stop().animate() 这样的重新选择jQuery 对象调用上一遍又一遍地制作动画。这是低效的，只应在必要时进行，例如当 DOM 已被修改并需要查找当前状态时。

如果在按钮上找到.toggle，我的方法只是用新设置切换effect 变量。简单、可靠。从 Google 地图加载 iframe 时，有时似乎确实存在轻微延迟。这在 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/

【讨论】：