Solved

slideLeft and fadeIn

Posted on 2012-04-03
4
461 Views
Last Modified: 2012-08-13
I wounder if there is a possibility to slide left and also fadeIn at the same time.
I have 5 text boxes i am trying to slide them from left to right but to make it more elegant i trying to play with opacity or fadeIn.

i would be thankful is someone have a suggestion.

$("#slides div").hide();
	$('#slide1').slideLeftShow();

Open in new window

0
Comment
Question by:Refael
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37804427
do it like this:
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
			$("#slides div").animate({
    opacity: 0,
    left: 100,
  }, 1000);
		});
    </script> 
</head> 
<body>
<div id="slides">
	<div style="width:50px;height:50px;background-color:red;display:block;position:relative;left:0px;">aa</div>
</div>
</body>

Open in new window

0
 

Author Comment

by:Refael
ID: 37804454
Hi designatedinitializer,

Thank you.

I need it to fadeIn while it slideLeft and not fadeOut.
0
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 500 total points
ID: 37805372
You just need to invert the settings.
Like this:
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
			$("#slides div").animate({
    opacity: 1,
    left: 100,
  }, 1000);
		});
    </script> 
</head> 
<body>
<div id="slides">
	<div style="width:50px;height:50px;background-color:red;display:block;position:relative;left:0px;opacity:0;">aa</div>
</div>
</body>

Open in new window

0
 

Author Closing Comment

by:Refael
ID: 37821863
Thank you!
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question