CODEWITHSUNDEEP
jquery
caramba
caramba

Reputation: 22480

jQuery animate with changing multiple class name doesnt work

Could someone please have a look at this and tell me what I'm doing wrong. It's a span with class move.up on click the .content-wrapper element will move and the .move.up wil change class name to .move.dwn later the move.dwn.click(function() should start but I can never make it to that point, why?

 <style type="text/css">
    .content-wrapper {
        height:100px;
        width:100px;
        background-color:orange;
        position:relative;
    }
    span.move {
        background-color:fuchsia;
        cursor:pointer;
    }
</style>

<span class="move up">click here</span>
<div class="content-wrapper"></div>

<script type="text/javascript">
    $(document).ready(function() {

        $('.move.up').click(function() {
            alert("up");
            $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
            $(this).removeClass('up');
            $(this).addClass('dwn');
        });

        $('.move.dwn').click(function() {
            alert("dwn");
            $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
            $(this).removeClass('dwn');
            $(this).addClass('up');
        });
    });

</script>

Upvotes: 0

Views: 333

Answers (4)

Spork
Spork

Reputation: 1651

Your problem lies in the .click() function not updating the elements they are tied to. Luckily jQuery has a solution for this in on() (previously live()). This will dynamically bind your events and after updates it will still select on class.

Try this:

<script type="text/javascript">
$(document).ready(function() {

    $('.move.up').on('click', function() {
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    });

    $('.move.dwn').on('click', function() {
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
});

Upvotes: 0

Uirri
Uirri

Reputation: 273

What jQuery version are you using?

If you're using the 1.8 version this might help you:

$('.move').on("click", function() {
    if($(this).hasClass('up')) {
         $('.content-wrapper').animate({
            'left': '+=568px'
        }, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    }
    else {
        $('.content-wrapper').animate({
            'left': '-=568px'
        }, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    }

});

Example (changed distance to 100 px to make it easier to see): http://jsfiddle.net/XWyZD/1/

Upvotes: 1

adamdehaven
adamdehaven

Reputation: 5920

Since your $('.move.dwn').click(function() { is tied to the $('.move.dwn') element that may or may not exist on page load, you need to bind to a different element that IS available when the document loads. I'd change both functions as shown below

<script type="text/javascript">
$(function() {
    $(body).on('click', '.move.up', function() {
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    });

    $(body).on('click', '.move.down', function() {
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
 });
</script>

Upvotes: 1

Ben Felda
Ben Felda

Reputation: 1484

You are adding the click events before the item is in the dom. Add the click event listeners to a parent instead and they will execute when they bubble up.

$(document).ready(function() {
    $(document).on('click', '.move.up', function(){
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    }).on('click', '.move.dwn', function(){
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
});

Upvotes: 1

Related Questions