CODEWITHSUNDEEP
jquery
Jesse Winton
Jesse Winton

Reputation: 1

Jquery Effect- Fading

I was wondering if there is a simple way to make a div fade in and slide to the right once the browser window is fully loaded and fade out and slide farther to the right if a link is clicked which takes the user to another part of the site . I don't know much about JQuery so any help would be appreciated! Thanks!

Upvotes: 0

Views: 133

Answers (3)

Steve Robbins
Steve Robbins

Reputation: 13812

$(document).ready(function() {

    $('#object').animate({opacity: 0.00}, 1).animate({opacity: 1.00, left: 50}, 'slow');

    $('#click').click(function(){

        var left = parseInt($('#object').css('left'));

        $('#object').animate({opacity: 0.00, left: (left + 50)}, 'slow');
    });
});

Live demo: http://jsfiddle.net/imoda/sKqnS/7/

Upvotes: 0

Wex
Wex

Reputation: 15695

I would recommend using .animate() over .fadeIn() and .fadeOut() simply because the using .fadeOut() adds display: none when it's done.

This block of code on the .animate() page might help you get started...

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

In terms of having something happen when the user clicks a link (other than taking them to the page), you're going to want to use event.preventDefault().

Upvotes: 0

Ben G
Ben G

Reputation: 26771

Check out the jQuery documentation for animations. There are fadeIn() and fadeOut() methods.

As for sliding, you'll want to check out the jQuery animation and effects.

More generally, you need to start out by reading a good jQuery tutorial. Trust me, it's not hard to start using effectively.

Upvotes: 1

Related Questions