Jquery callback function is not changing css attribute

Question

I'm Trying to zoom a picture in fullscreen (later on!). Why is the container css attribute margin-left not changed within the callback function? (Scroll down please ;)

<!DOCTYPE html>
<html>
<head>
    <title>Zoom Hover</title>
        <style type="text/css">
    #container{
        margin-left:200px;
        }

    @-moz-keyframes zoom {
        0%{
            height:200px;
            width:200px;
            }
        100% {
                width: 1000px;
                height: 1000px;
                -moz-transform: translate(-200px);
            }
    }

    @-webkit-keyframes 'zoom' {
        0%{
            height:200px;
            width:200px;
            }
        100% {
                width: 1000px;
                height: 1000px;
                left:0px;
                -webkit-transform: translate(-200px);
            }
    }    

.img1 {
    width:200px;
    height:200px;

    }

.img2 {
    -moz-animation: zoom 4s;
    -webkit-animation: 'zoom' 4s;

}

</style>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('img').click(function() {
            $("#container img").addClass("img2").removeClass("img1",function(){
                        $("#container").css("margin-left","0px");});}); /*HERE WHY IS IT NOT CHANGING MARGIN-LEFT??*/
    });


    </script>
</head>
<body>
    <div id="container">
        <img class="img1" src="http://www.maplehilltree.com/CHRIST_PUNCHERS_HOOO__6_.jpg"/>
    </div>
</body>
</html>

Alfabravo · Accepted Answer · 2011-12-09 14:24:39Z

1

What if you try this script?

<script type="text/javascript">
    $(document).ready(function() {
        $('img').click(function() {
            $("#container img").addClass("img2").removeClass("img1");
                $("#container").css("margin-left","0px");
        });
    });
    </script>

EDIT: If you want to animate the transition without jumps, try:

1.) change your javascript using JQuery UI:

$(document).ready(function() {
        $('img').click(function() {
            $("#container").switchClass("test1", "", 1000).find("img").addClass("img2").removeClass("img1");
            /*$("#container").css("margin-left","0px");*/
        });
    });

2.) Put a class to the container so you can use swithClass method to animate

<body>
    <div id="container" class="test1">
        <img class="img1" src="http://www.maplehilltree.com/CHRIST_PUNCHERS_HOOO__6_.jpg"/>
    </div>
</body>

3.) Remove margin-left from #container and create the css class

.test1{
    margin-left:200px;
}

Hope you like it :)

Wanna check how it works? http://jsfiddle.net/dS3Jp/

edited Dec 9, 2011 at 14:24

answered Dec 9, 2011 at 13:58

Alfabravo

7,5786 gold badges49 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jurudocs Over a year ago

hmmm like the above answer...it FIRST sets the margin to 0 and then it animates...is it also working the other way round?

Jurudocs Over a year ago

hi thats looks like a goog way im getting an error $("#container").switchClass is not a function but thats my fault i guess...i think that should it be!

Alfabravo Over a year ago

Check the jsfiddle as a reference. You must load JqueryUI JS file as well (with jquery.js is not enough).

jabclab · Accepted Answer · 2011-12-09 13:54:50Z

0

You don't need to put this in a callback as .removeClass() is not asynchronous, give this a try:

$("#container img").addClass("img2").removeClass("img1");
$("#container").css("margin-left", "0px");

answered Dec 9, 2011 at 13:54

jabclab

15.1k5 gold badges57 silver badges51 bronze badges

1 Comment

Jurudocs Over a year ago

@jack than he is doing it right away without doing one after the other...the whole nice zoom effect is gone then...

Filip · Accepted Answer · 2011-12-09 13:55:25Z

0

removeClass doesn't take a callback function like that. It does accept a function, but it's not a callback. Read about that here: http://api.jquery.com/removeClass/

What you should do is change it to:

$("#container img").addClass("img2").removeClass("img1");
$("#container").css("margin-left","0px");

To make it even shorter you could do:

$("#container").css("margin-left","0px").find("img").addClass("img2").removeClass("img1");

answered Dec 9, 2011 at 13:55

Filip

2,52217 silver badges29 bronze badges

3 Comments

Jurudocs Over a year ago

that looks nice...but it totally destroys my zoom effect. the animation sets margin left to 0 and i wish it was staying like this with no jumping. i tried this...but i doesn't work : $("#container").find("img").addClass("img2").removeClass("img1").css("margin-left","0px");

Jurudocs Over a year ago

the problem is...it seems, that the transformation is not finished...and jquery doesn't know about it ;-) That is the problem if i mix it up ;-P Is there a qjery timeout or sth?

Filip Over a year ago

So when the class is removed it animates with css and you want to wait until that's finished? I'm afraid you can't do that. But if you know how long the animation is you could use jQuery delay(). api.jquery.com/delay

Mark Schultheiss · Accepted Answer · 2011-12-09 14:21:47Z

0

$(document).ready(function() {
     $('img').click(function() {
         $(this).addClass("img2").removeClass("img1").parent().css("margin-left","0px");
     });
});

Testing it out: http://jsfiddle.net/MarkSchultheiss/nVd9N/

EDIT: Add in a delay:

$(document).ready(function() {
    $('img').click(function() {
        $(this).addClass("img2").delay(2000).removeClass("img1").delay(2000).parent().css("margin-left", "0px");
    });
});

edited Dec 9, 2011 at 14:21

answered Dec 9, 2011 at 14:05

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

1 Comment

Jurudocs Over a year ago

thanks...similar effect like the other answers...is it possible to check if the first part ist still animating?

adeneo · Accepted Answer · 2011-12-09 14:40:17Z

0

Your animation seems jumpy, but for setting CSS when the animation is complete, just bind the animationEnd event and use a callback, like so:

$(document).ready(function() {
        $('img').click(function() {
              $("#container img").addClass("img2").removeClass("img1");
        });
        $('#container').on("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
              $("#container").css("margin-left","0px");
        });
});

answered Dec 9, 2011 at 14:40

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

Jquery callback function is not changing css attribute

5 Answers 5

3 Comments

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related