Skip to content Skip to sidebar Skip to footer
Home / Image / Javascript / Jquery / Radio Button / Show Hide

Jquery Show And Hide Image Not Working

Post a Comment
I have a code to one of my pages. It's supposed to fade in, stay and fade out an image when someone clicks a radio button. Also the database is to be updated onclick using ajax. &

Solution 1:

This is working :

$("#rad").click(function () {
    $("#success").fadeIn(500).delay(1000).fadeOut(1000);
});​

Javascript can sometime be asynchronous, if you don't do it this way, delay() will not work.

You should also use callback for a better code evolution.

Solution 2:

Put the delay/fadeOut in the callback of the fadeIn function (or chain the methods as suggested in the other answer): 

$("#rad").click(function () {
    $("#success").fadeIn(500, function() {
        $(this).delay(1000).fadeOut(1000);
    });
});

Demo here

Solution 3: 

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script><scripttype="text/javascript">
        $(document).ready(function(e) {
            $(".radios").click(function() {
                $("#success").fadeIn(500).delay(1000).fadeOut(1000);
            })
        });
        functionupimg1(){}
        functionupimg2(){}
        functionupimg3(){}
    </script></head><body><tableclass="profimg"><tr><tdheight="50"width="50"><imgid="success"src="http://cdn4.iconfinder.com/data/icons/simplicio/128x128/notification_done.png"style="display:none"height="50"width="50"></td></tr><tr><tdalign="center"><imgclass="profimg"src=""alt="Administratorasdf"height="100"width="100"/></td></tr><tr><tdid="rad"align="center"><inputclass="radios"type='radio'title='Publicly Visible'name='img_pub'onClick="upimg1()" /><inputclass="radios"type='radio'title='Visible Only To Users'value='UsersOnly'name='img_pub'onClick="upimg2()" /><inputclass="radios"type='radio'title='Visible Only To You'value='Hide'name='img_pub'onClick="upimg3()"checked='checked'/></td></tr></table></body>

Post a Comment for "Jquery Show And Hide Image Not Working"