Question

我甚至不确定我问这个问题是对的，我是jQuery newb。

但是这是我的场景，我在WordPress帖子上构建了这个CSS3 / jQuery社交分享按钮，它在单个帖子页面上运行良好。当我在主页或任何其他存档页面上时，会出现问题，因为它们是共享按钮的多个实例。我正在使用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>

动画一个页面上不止一次的单个元素

1 个答案: