CODEWITHSUNDEEP
javascriptjquerywordpresscssjquery-animate
Chozen
Chozen

Reputation: 299

Animate a single element that's on a page more than once

I'm not even sure I asked that question the right, I'm a jQuery newb.

But here's my scenario, I built this CSS3/jQuery social share button to use on WordPress posts, it works great on a single post page. The problem occurs when I'm on the home page or any other archive page where they're multiple instances of the share button. I'm using jQuery to animate the button, so when it's clicked the share button opens up.

The problem is when there's more than one share button, they all open up on the page, it's chaos.

Here's a demo link:

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

How do I open one share button at a time and close it when another one is opened? Like the way it is on AskMen.com.

Here's my code thus far, pardon the silly name.

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

Thanks for your help.

Upvotes: 0

Views: 115

Answers (1)

Nikola Nikolić
Nikola Nikolić

Reputation: 366

Here is your adopted code:

<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>

Upvotes: 2

Related Questions