0

我有以下代码，当您单击 a.discover 时会为元素设置动画：

$(document).on('click', 'a.discover', function(e){
            e.preventDefault();
            if(toggleState) {
                $(this).addClass('open');
                $(this).parent().find('p.subtitle').stop(true,true).animate({'marginTop': -471}, 1200, "easeOutQuart" );
            } else {
                $(this).parent().find('p.subtitle').stop(true,true).animate({'marginTop': 21}, 1200, "easeOutQuart" );  
                $(this).removeClass('open');
            }
            toggleState = !toggleState;
        });

HTML

<div class="container">
    <p class="subtitle">Released on July 2013</p>
    <a href="" class="discover">Discover Now</a>

    <p class="subtitle">Released on July 2013</p>
    <a href="" class="discover">Discover Now</a>

    <p class="subtitle">Released on July 2013</p>
    <a href="" class="discover">Discover Now</a>
</div>

CSS

.container a.discover{
    z-index: 100;
    display:block;
    position:absolute;
    width:100%;
    color:#fff; 
    text-decoration:none;
    text-transform:uppercase;
    bottom:0px;
    text-align:center;
    font-size:11px;
    font-family:  'univers_55regular', arial,helvetica,clean,sans-serif;
    padding-top:6px;
    padding-bottom:6px;
    background: url("../img/cross.png") no-repeat scroll 73px 7px #000;
}

 .container p.subtitle{
    font-family: 'univers_45_lightregular', arial,helvetica,clean,sans-serif;
    font-size:12px;
    color:#000;
    margin-top:21px;
}   

.container{
    width:930px;
    margin-left:35px;
    }

我有 3 个这样的按钮，所以当您单击一个以对其进行动画处理时，您需要单击另一个按钮两次才能工作。一个想法可能出了什么问题？谢谢！

4

1 回答 1

2

您似乎正在使用一个全局变量“toggleState”，它由每个链接共享。

您可以使用“开放”类检索当前链接的状态信息：

$(document).on('click', 'a.discover', function(e){
            e.preventDefault();
            if($(this).hasClass('open')) {
                $(this).parent().find('p.subtitle').stop(true,true).animate({'marginTop': 21}, 1200, "easeOutQuart" );  
                $(this).removeClass('open');
            } else {
                $(this).addClass('open');
                $(this).parent().find('p.subtitle').stop(true,true).animate({'marginTop': -471}, 1200, "easeOutQuart" );
            }
        });
于 2013-06-28T14:20:19.997 回答