www.webdeveloper.com
Results 1 to 3 of 3

Thread: Jquery fadeout then redirect

  1. #1
    Join Date
    Jan 2014
    Posts
    1

    Question Jquery fadeout then redirect

    So I have this so far:

    In the <head> area:

    Code:
      <script type="text/javascript" src="jquery.min.js"></script>
    <script>
    function hyperlink(url)
    {
    $( '#weather_infos' ).fadeOut(1000);
    window.location.href = url;
    }
    </script>
    In the <body> area:

    Code:
    <li><button onclick="javascript: hyperlink('index.php?page=months')">Months</a></li>
    All I want to do is to fade out the main content in the div named "weather_infos" and then go to the page requested. But it executes all in one go. It does not wait for the animation to play out.

    How to fix?

    Thanks for reading.

  2. #2
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    There is a parameter in fadeOUt that lets you do something after the animation is complete.
    Code:
    $( '#weather_infos' ).fadeOut(1000,function(){window.location.href = url;});

  3. #3
    Join Date
    Feb 2014
    Location
    Managua, Nicaragua
    Posts
    45
    This is the functionally code...

    Code:
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
    jQuery(document).ready(function($){
    	jQuery('a').click(function(e){
    		var url = jQuery(this).attr('href');
    		$('#weather_infos').fadeOut(1000, function(){ window.location.href = url; });
    		e.preventDefault();
    	});
    })
    </script>
    <li><a href="index.php?page=months">Months</a></li>
    hope to be helpful

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles