jQuery 切换点击

发布于 2024-09-14 21:58:50 字数 205 浏览 3 评论 0原文

假设我需要一个元素在单击时呈现动画。为此，我只是：

$('#header .icon').click(function() {
    $('#header form').animate({width:'195px'});
});

但是我该如何做到这一点，以便当我再次单击该元素时会发生相反的动画？（例如，动画宽度：0px；）

原文

Say I need an element to animate when clicked. To do this I just:

$('#header .icon').click(function() {
    $('#header form').animate({width:'195px'});
});

But how would I make it so that when I click the element again the opposite animate takes place? (e.g. animate to width: 0px; )

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

轮廓§ 2024-09-21 21:58:50

您可以像这样使用 .toggle() ：

$('#header .icon').toggle(function() {
  $('#header form').animate({width:'195px'});
}, function() {
  $('#header form').animate({width:'0px'});
});

如果是最初你可以像这样切换它的宽度：

$('#header .icon').click(function() {
  $('#header form').animate({width:'toggle'});
});

You can use .toggle() like this:

$('#header .icon').toggle(function() {
  $('#header form').animate({width:'195px'});
}, function() {
  $('#header form').animate({width:'0px'});
});

If it was initially out you could toggle it's width like this:

$('#header .icon').click(function() {
  $('#header form').animate({width:'toggle'});
});

回复收藏 0 原文

梦里°也失望 2024-09-21 21:58:50

我今天遇到了类似的问题，这里的答案都没有为我解决。我的解决方案是保存状态，以便在单击同一元素时发生不同的事情：

var estado="big";
$(".snacks").click(function() {
    if(estado == "big"){
        $("#men_snacks").animate({width:"183px", height:"45px"}, 1000);
        return estado="small";
    } else if(estado == "small") {
        $("#men_snacks").animate({width:"82%",height:"550px"},1000);
        return estado="big";
    }
});

I had a similar problem today, and none of the answers here solved it for me. My solution was to save states in order to have different things happen when the same element is clicked:

var estado="big";
$(".snacks").click(function() {
    if(estado == "big"){
        $("#men_snacks").animate({width:"183px", height:"45px"}, 1000);
        return estado="small";
    } else if(estado == "small") {
        $("#men_snacks").animate({width:"82%",height:"550px"},1000);
        return estado="big";
    }
});

回复收藏 0 原文

~没有更多了~