All geek questions in one place

JQuery fadein from left to right

In my jQuery, I have a fadein div with id. I want fadein to move from left to right.

My snippet so far:

$('#content').hide().fadeIn(1500);

Who can help me?

Thanks!

+4
source share
6 answers
  $("#content").hide().show("slide", { direction: "left" }, 1500);
+2
source

It will be harder than it sounds. And even harder if you need to support older browsers like IE8.

The most practical solution that I can think of is to use an overlay element that has the same color as the background, but with a gradient rather than a solid background color.

The gradient will have a solid color, at least the size of the element that will be hidden so that it displays only the background color, but would have a hidden part that extends beyond the element and disappears to transparent in this hidden part.

This is then a simple case of overlay animation, so that the gradient gradually opens, showing the content behind it.

You will not use the normal fadeIn() function at all. Although it would look like lateral attenuation, from a technical point of view it would be like an effect to move the map from the top of the element to reveal it.

In older versions of IE, it can be difficult to obtain rights that use the proprietary function for gradients. This should be possible in theory, but the IE8 filter gradients have quite a few quirks that can catch you if you try to make smart things like this.

I don’t have time to write a working prototype for you, but hopefully this will give you enough starter to start writing.

+2
source 
 $('#content').hide().fadeIn(function(){ $('#content').animate({ left: "80px" }, 500); },1500).css('left' ,'0');
+1
source

//Is this what you want

 var $marginLefty = $("#content"); // your selector here $marginLefty.animate({ height:'toggle',width:'toggle', marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0 });

Example Example Edited Below

 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var $marginLefty = $("#content"); // your selector here $marginLefty.animate({ height:'toggle',width:'toggle', marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0 }); }); }); </script> </head> <body> <button>Start Animation</button> <div id="content" style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
+1
source

This is a quick way simple :

$("#ID").css({"position":"relative","opacity": 0, "left":"+=100"}); $("#ID").animate({left:0, opacity:1},2000);

You need to specify "opacity" :0, "position": "relative"(or Absolute) in CSS or customize it using jQuery. As I did.

This code moves the 100px object from its original position. And then again during the attenuation.

Luck!

+1
source

You can use CSS transitions by combining two of them, width and opacity.

 -webkit-transition: width 500ms ease-in, opacity 1.5s ease-out; -moz-transition: width 500ms ease-in, opacity 1.5s ease-out; -o-transition: width 500ms ease-in, opacity 1.5s ease-out; transition: width 500ms ease-in, opacity 1.5s ease-out;

To keep the content in one place, see this script: http://jsfiddle.net/LLn311un/1/

0
source

Source: https://habr.com/ru/post/1498365/

More articles:


All Articles