javascript - 多次为页面上的单个元素设置动画

Question

我什至不确定我问的那个问题是否正确，我是一个 jQuery 新手。

但这是我的场景，我构建了这个 CSS3/jQuery 社交分享按钮以用于 WordPress 帖子，它在单个帖子页面上效果很好。当我在主页或任何其他存档页面上出现共享按钮的多个实例时，就会出现问题。我正在使用 jQuery 为按钮设置动画，所以当它被点击时，共享按钮会打开。

问题是当有多个分享按钮时，它们都在页面上打开，很困惑。

这是一个演示链接:

http://best5ive.com/wp-content/themes/b5/library/sexy-share1.html

我如何一次打开一个共享按钮并在另一个打开时关闭它？就像 AskMen.com 上的那样。

到目前为止，这是我的代码，请原谅这个愚蠢的名字。

HTML

<div class="sexy-widget">

    <a class="sexy-button" alt="Sexy Share" title="Sexy Share"></a>
      <div class="sexy-network-wrapper">
            <a class="sexy-facebook"></a>
            <a class="sexy-twitter"></a>
            <a class="sexy-googleplus"></a>
            <a class="sexy-pinterest"></a>
            <a class="sexy-linkedin"></a>
            <a class="sexy-email"></a>                
        </div>

</div>

<div class="sexy-widget">

    <a class="sexy-button" alt="Sexy Share" title="Sexy Share"></a>
      <div class="sexy-network-wrapper">
            <a class="sexy-facebook"></a>
            <a class="sexy-twitter"></a>
            <a class="sexy-googleplus"></a>
            <a class="sexy-pinterest"></a>
            <a class="sexy-linkedin"></a>
            <a class="sexy-email"></a>                
        </div>

</div>

jQuery

$( "a.sexy-button" ).toggle(
function()
{
  $( ".sexy-email" ).delay(100).animate({ top: "0px", left: "81px" }, "slow" );
  $( ".sexy-facebook" ).delay(200).animate({ top: "40px", left: "0px" }, "slow" );
  $( ".sexy-twitter" ).delay(300).animate({ top: "120px", left: "0px" }, "slow" );
  $( ".sexy-pinterest" ).delay(400).animate({ bottom: "0px", left: "81px" }, "slow" );
  $( ".sexy-linkedin" ).delay(500).animate({ top: "120px", right: "0px" }, "slow" );
  $( ".sexy-googleplus" ).delay(600).animate({ top: "40px", right: "0px" }, "slow" );
  $( "a.sexy-button" ).removeClass("rotateReverse").addClass( "animated rotateIn orange-share" );
},
function()
   {
    $( ".sexy-email" ).animate({ top: "80px", left: "80px" }, "slow" );
    $( ".sexy-facebook" ).animate({ top: "80px", left: "80px" }, "slow" );
    $( ".sexy-twitter" ).animate({ top: "80px", left: "80px" }, "slow" );
    $( ".sexy-pinterest" ).animate({ bottom: "80px", left: "80px" }, "slow" );
    $( ".sexy-linkedin" ).animate({ top: "80px", right: "80px" }, "slow" );
    $( ".sexy-googleplus" ).animate({ top: "80px", right: "80px" }, "slow" );
    $( "a.sexy-button" ).addClass("rotateReverse").removeClass( "rotateIn orange-share" );
    });

感谢您的帮助。

Answer 1

这是您采用的代码:

<script>
$( document ).ready(function() {

$( "a.sexy-button" ).click(function() {
        var block = $(this).parent();
        if (!$(this).hasClass('animated')) {
            block.find( ".sexy-email" ).delay(100).animate({ top: "0px", left: "81px" }, "slow" );
            block.find( ".sexy-facebook" ).delay(200).animate({ top: "40px", left: "0px" }, "slow" );
            block.find( ".sexy-twitter" ).delay(300).animate({ top: "120px", left: "0px" }, "slow" );
            block.find( ".sexy-pinterest" ).delay(400).animate({ bottom: "0px", left: "81px" }, "slow" );
            block.find( ".sexy-linkedin" ).delay(500).animate({ top: "120px", right: "0px" }, "slow" );
            block.find( ".sexy-googleplus" ).delay(600).animate({ top: "40px", right: "0px" }, "slow" );
            $(this).removeClass("rotateReverse").addClass( "animated rotateIn orange-share" );  
        }
        else {

            block.find( ".sexy-email" ).animate({ top: "80px", left: "80px" }, "slow" );
            block.find( ".sexy-facebook" ).animate({ top: "80px", left: "80px" }, "slow" );
            block.find( ".sexy-twitter" ).animate({ top: "80px", left: "80px" }, "slow" );
            block.find( ".sexy-pinterest" ).animate({ bottom: "80px", left: "80px" }, "slow" );
            block.find( ".sexy-linkedin" ).animate({ top: "80px", right: "80px" }, "slow" );
            block.find( ".sexy-googleplus" ).animate({ top: "80px", right: "80px" }, "slow" );
            $(this).addClass("rotateReverse").removeClass( "rotateIn orange-share" );

        }

    });
});
</script>