InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

jQuery tutorials

    jQuery Ajax

    • jQuery JSONP
    • jQuery .post()
    • jQuery .load()
    • load script with cache enabled
    • jQuery .ajax() file upload

    jQuery CSS

    • change table cells color based on value
    • check if element is visible in viewport
    • display auto fade out message
    • fitvids.js for automatically resizing videos
    • get class list of an element
    • jQuery toggleClass() examples
    • make a div stick at top on scroll
    • table with alternate color rows

    jQuery Events

    • Javascript/jQuery - disable right click
    • jQuery - text input field - change keyup and paste events
    • trigger click using jQuery or Javascript

    jQuery DOM

    • jQuery html() vs text()
    • Check if an element exists
    • find total DOM elements
    • jQuery encode string to html entities
    • jQuery - read and modify iframe content
    • jQuery - create iframe with content
    • jQuery - find select element selectedIndex, value and text
    • jQuery - get checkbox value and checked state
    • jQuery - get javascript object

    jQuery Cookbook

    • get jQuery version
    • jQuery - add text to existing div
    • jQuery sliding effect - slideUp, slideDown, slideToggle

    jQuery UI

    • jQuery UI make element movable
    • jQuery ui slider and input text box - one way binding
    • jQuery ui slider and input text box - two way binding
     
    • Home
    • > Tutorials
    • > Javascript
    • > jQuery

    How to display auto fade out message using jQuery

    By admin on Dec 29, 2015

    Sometimes we need to display a message and then fade it out. jQuery fadeOut will make an element fadeOut (by animating css property opacity) will make its css property display to none eventually. Here is sample code for it.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    
    <input type="button" id="id1" type="button" value="click me">
    <span style="color:red;" id="fademsg"></span>
    
    <script type="text/javascript">
    $("#id1").click(function () {
      $("#fademsg").text("A message that will fadeout");
      $("#fademsg").fadeOut(3000);
    });
    </script>
    refresh done
    try it online

    Note that we had to set the display to inline (anything other than none, so that the example can work on 2nd and subsequent clicks also.

    Fadeout messaged displayed at top center

    We can also make fade out message at fixed position and place it at the top and center of the window.
    jquery-fadeout-message-top-center-example

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    
    <input type="button" id="id1" type="button" value="click me">
    <span style="color:red;" id="fademsg"></span>
    
    <script type="text/javascript">
    $("#id1").click(function () {
      $("#fademsg").css("display", "none");
      $("#fademsg").text("A message that will fadeout");
      $("#fademsg").css("position", "fixed");
      $("#fademsg").css("left", "50%");
      $("#fademsg").css("top", "0px");
      var w = parseInt($("#fademsg").css("width"), 10);
      $("#fademsg").css("margin-left", "-" + w/2 + "px");
      $("#fademsg").css("display", "inline");
      $("#fademsg").fadeOut(3000);
    });
    </script>
    refresh done
    try it online

    Suggested posts:

    1. jQuery – load a script with cache enabled
    2. jQuery – difference between html() and text()
    3. jquery ajax – post form having file uploads
    4. jQuery – how to get version info
    5. jQuery how to load a url into an element
    6. jQuery post form data using ajax
    7. PhantomJS – find all fonts-families on a web page
    8. Jquery – change table cells color based on value
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged CSS, Javascript, jQuery, Tutorials, Web Development

    Follow InfoHeap

    facebook
    twitter
    googleplus
    • Browse site
    • Article Topics
    • Article archives
    • Recent Articles
    • Contact Us
    • Omoney
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

    Copyright © 2023 InfoHeap.

    Powered by WordPress