Jquery Animate a -Webkit-Transform

jQuery animate - any universal solution?

Here was my code which did not work:

$("html,body").animate({
    scrollTop: "500px"
}, {
    duration: 500,
    complete: function () {
        alert('Test');            
    }
});

And here is the code that works fine in all browsers:

$("html,body").animate({
    scrollTop: "500px"
}, {
    duration: 500
})
.promise()
.then(function () {
    alert('Test');            
});

^{This answer was posted as a comment to my question and I thought that it would be helpful for others also.}

jQuery animate += and latest version

If it is a bug I hope they fix it because it was useful. However for now you can do something like this:

$(".blue").click(function() {
    var new_left = +$(this).css("left").replace("px", "") + 100;
    $(".blue").animate({left: new_left + "px"}, 500)    
});

Or as @adeneo suggested:

$(".blue").click(function() {
    $(this).animate({left: $(this).position().left+100}, 500);  
});

See working demo with jQuery 2.x

Performance test

How can I animate a calculated position with JQuery

jsBin demo

If you already use calc (CSS3) than you'll have nothing against using in your CSS:

Using CSS3 transition and calc()

#line{
    transition: 1s;
    /*...other stuff...*/
}

and in your jQuery (instead of .animate())

var outW2 = $("#line").outerWidth() / 2;

$("#line").css({ 
  left : "calc(50% - "+ outW2 +"px)",
  top  : 70
});

---

Using .animate() and negative margin (for centering)

For all older browsers, you can simply use .animate() as you did,

moving the element to 50% but also to a -half-width left margin (to center it):

var outW2 = $("#line").outerWidth() / 2;

$("#line").animate(){
  left: "50%",
  marginLeft : -outW2
}, 1000);

jsBin demo (crossbrowser solution)

How to animate a class on click using jquery?

you have syntactically mistake in your script, no need to add . before the class name in addClass() function. A working fiddle is here Use like this

$('#button').on("click",function(){
    $('#target_element').addClass('animate_class_name'); 
});

or,

$('#button').click(function(){
    $('#target_element').addClass('animate_class_name'); 
});

or,

$(document).on("click","#button",function(){
    $('#target_element').addClass('animate_class_name'); 
});

Jquery animate() opacity working but animating right does not?

In CSS file you should consider adding "." in the beginning.
and Js file here below with corrections.

 $(document).on("click touchstart tap", ".buttonchat", function () {
   
   
   
   $('.message').each(function(i) {
   delay =(i)*500;
   
     $(this).delay(delay).animate({
    "opacity": 0.20 ,
   "right": "0px" , "top": "0px" ,  "background-color" : "green"  

  },1000, function() {
    // Animation complete.
 
  });
   
   
 });
 });

.message{
  left: 0px;
position : absolute ; 
  }
  
.relative{ position : relative ;   }

<button style="width: 200px; height: 100px" class="buttonchat"></button>

<div class="message-main relative">
  <div class="message-hold">
    <div class="messages">
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 19.2105rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        ><div
          class="message"
          style="width: 18.2105rem; height: 1.26316rem; opacity: 1"
          >Hello! I hope you're having a good night</div
        >
      </div>
      <br />
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 15.7368rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        ><div
          class="message"
          style="width: 14.7368rem; height: 1.26316rem; opacity: 1"
          >I'm a junior interactive designer lt;/div
        >
      </div>
      <br />
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 23.8947rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        >
        <div
          class="message"
          style="width: 22.8421rem; height: 1.26316rem; opacity: 1"
        >
          which basically means I create cool looking websites br>        </div>
      </div>
      <br />
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 30.9474rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        ><div
          class="message"
          style="width: 29.9474rem; height: 1.26316rem; opacity: 1"
          >I have exactly 0 qualifications and mostly get by using stackoverflow
          lt;/div
        >
      </div>
      <br />
      <div
        class="bubble cornered left"
        style="
          opacity: 1;
          width: 20.3158rem;
          height: 2.47368rem;
          margin-top: 0px;
          margin-left: 0px;
          transform: scale(1);
        "
      >
        <div class="loading" style="transform: translateX(0rem) scale(1)"
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b
          ><b style="opacity: 0; transform: scale(0)">•</b></div
        ><div
          class="message"
          style="width: 19.3158rem; height: 1.26316rem; opacity: 1"
          >Now I have your full confidence let's move on!</div
        >
      </div>
      <br />
    </div>
  </div>
</div>

---

Related Topics