4

In my jQuery I fadein a div with an ID. I want that the fadein "moves" from the left to the right.

My snippet so far:

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

Who can help me?

Thank you!

Raffinatore
  • 133
  • 2
  • 5
  • 10

7 Answers7

4
 $("#content").hide().show("slide", { direction: "left" }, 1500);
Sebastian Rush
  • 528
  • 6
  • 25
  • 1
    this doesn't seem to work. Uncaught TypeError: k.easing[this.easing] is not a function at init.run (jquery-3.4.1.min.js:2) – Urasquirrel Sep 11 '20 at 21:22
3
$('#content').hide().fadeIn(function(){ 
    $('#content').animate({
        left: "80px"
    }, 500); 
},1500).css('left' ,'0');
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Rajiv007
  • 1,126
  • 7
  • 13
2

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

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

The gradient would have the solid colour for at least the size of the element being hidden so that it appears to be just showing the background colour, but would have a hidden portion that extends beyond the borders of the element, and fade out to transparent in that hidden portion.

Then it's a simple case of animating the overlay so that the gradient is gradually exposed, revealing the content behind it.

You wouldn't use the normal fadeIn() function at all. Even though it would look like a sideways fade-in, from a technical perspective it would be like an effect to slide a card off the top of an element to reveal it.

It may be tricky to get right in old versions of IE, which use a proprietary feature for gradients. It ought to be possible in theory, but IE8's filter gradients have quite a few quirks that might catch you out if you're trying to do 'clever' stuff with them like this.

I don't have time to write a working prototype for you, but hopefully that gives you enough of a starter to get going with writing it.

Spudley
  • 166,037
  • 39
  • 233
  • 307
2

This is a fast an easy way:

$("#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 the CSS or by tweaking it with JQuery. Like I've done.

This code moves the object 100px from it's original position. And then back again while fading in.

Good Luck!

Haroun Hajem
  • 5,223
  • 3
  • 26
  • 39
1

//This is 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
    });

Sample 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>
Suryaprakash Pisay
  • 642
  • 8
  • 23
1

You can use CSS transitions, 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 let the content stay at the same place see this fiddle: http://jsfiddle.net/LLn311un/1/

Fanky
  • 1,673
  • 1
  • 18
  • 20
1

I personally use the animate.css library

Simply link the css file to your page:

<link href= "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

You can also download the file and serve it locally.

Then just add the classes "animated slideInLeft" to your element.

$('#content').show().addClass('animated slideInLeft');

You can check the documentation here: https://animate.style/

tuancharlie
  • 161
  • 6