CODEWITHSUNDEEP
javascriptjqueryanimation
MeltingDog
MeltingDog

Reputation: 15434

JQuery animate .css() rather then using .anmiate()?

I want to aniamte the change of the margin-top of a div.

Normally I would so this as such:

 $("#mydiv").animate({ marginTop: '+='+myvar}, 200);

But this always adds (or subtracts) the value. I want a way to simply aniamte the change in value.

For example: if the div starts of with a margin top of 100 and myvar value is 50 I want to animate the div so it shrinks back to 50. Likewise if the myvar value is 200 I want to animate the change so grows to 200.

I can achieve this somewhat but resetting the CSS, eg:

$("#mydiv").css("margin-top", "0px");
$("#mydiv").animate({ marginTop: '+='+myvar}, 200);

each time but that makes it a bit clunky.

Does anyone know of a may to achieve this?

(Ps: without using CSS transitions)

EDIT: Added my code below

$("#info1tab").click(function() {
  $(".textbox").slideUp('200');
  $("#info1").delay(300).slideDown('200');
  var itemheight = $("#info1").css("height");
  var itemheightint = parseInt(itemheight);
  $("#photobox").animate({ marginTop: itemheightint }, 200);

});

$("#info2tab").click(function() {
  $(".textbox").slideUp('200');
  $("#info2").delay(300).slideDown('200');
  var itemheight = $("#info2").css("height");
  var itemheightint = parseInt(itemheight);
  $("#photobox").animate({ marginTop: itemheightint }, 200);

});

Upvotes: 0

Views: 145

Answers (4)

X-Factor
X-Factor

Reputation: 2117

I hope this helps JSFiddle

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
    });

Or you can use this JSfiddle

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
        $('<button class="show">Show all</button>')
            .appendTo('#wrapper');
    });

    $('.show').live('click',
                    function(){
                        $('#left-bg').animate(
                            {
                                'width': '50%'
                            },600);
                        $('#right-bg').animate(
                            {
                                'width': '50%'
                            },600);
                        $(this).remove();
                    });

Or you can use this to expand one div and shrink other at the same time:

$('.cell')
    .on('mouseenter', function(){
        $(this).animate ({width:"75%"},"slow").siblings('.cell').animate({'width': '15%'}, "slow");
    })
    .on('mouseleave', function(){
        $(this).add($(this).siblings('.cell')).animate ({width:"45%"},"slow");
    });

Regards.

Upvotes: 0

Jamir Khan
Jamir Khan

Reputation: 397

Try this code:

$("#mydiv").css("margin-top", "0px");
$("#mydiv").animate({ marginTop: topMargin+myvar}, 200);

Upvotes: 0

user1781710
user1781710

Reputation:

Create additional CSS classes that has the CSS properties you want and then do:

$("#mydiv").addClass("classname", 1000);

OR

$("#mydiv").removeClass("classname", 1000);

Upvotes: 0

Imperative
Imperative

Reputation: 3183

what is wrong with $('#mydiv').animate({marginTop: myvar});?

http://jsfiddle.net/muVsE/

Upvotes: 1

Related Questions