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

Question

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

});

go through this tutorial, and let me know if this help schillmania.com/content/projects/javascript-animation-1 — X-Factor
– X-Factor, Commented Mar 1, 2013 at 7:35
are you asking something like this ?? $('#left-bg).click( function(){ $(this).animate({'width': '100%'},600); }); — X-Factor
– X-Factor, Commented Mar 1, 2013 at 7:40
@X-Factor somewhat: I have 2 divs: Both are postion absolute. the one above has a varying dynamic height that changes on click. The margin of the lower div must change in response to the changes in heigh of the first — MeltingDog
– MeltingDog, Commented Mar 1, 2013 at 7:43
But this always adds (or subtracts) the value. This is wrong. You can always specify the final value. See this example — Jashwant
– Jashwant, Commented Mar 1, 2013 at 7:47

Imperative · Accepted Answer · 2013-03-01 07:41:46Z

1

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

http://jsfiddle.net/muVsE/

answered Mar 1, 2013 at 7:41

Imperative

3,1832 gold badges28 silver badges41 bronze badges

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

1 Comment

MeltingDog Over a year ago

that makes sense - but it just doesnt happen for me. Am adding my code to the top

user1781710 · Accepted Answer · 2013-03-01 07:44:30Z

0

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

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

OR

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

answered Mar 1, 2013 at 7:44

user1781710

3 Comments

Jashwant Over a year ago

Available in jQuery UI only. Not in core jQuery

user1781710 Over a year ago

Is it a big deal to add jQuery UI?

Jashwant Over a year ago

Yes, its a big deal if he doesnt want it. He hasnt tagged 'jQuery UI' in his question.

Jamir Khan · Accepted Answer · 2013-03-01 07:49:32Z

0

Try this code:

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

answered Mar 1, 2013 at 7:49

Jamir Khan

3971 silver badge13 bronze badges

Comments

X-Factor · Accepted Answer · 2013-03-01 07:56:05Z

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.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related