jQuery Fading Effects :-

jQuery Effects – Fading :- jQuery Effects – Fading :- दोस्तों आज के Tutorial में आप jQuery Fading Effects के बारे में पढ़ेंगे | इसकी मदद से आप किसी HTML elements के रंग को फीका कर सकते हैं जिससे उनका दिखना बंद हो जाये |

Type Of jQuery Fading Methods :-

jQuery Fading Methods चार प्रकार के होते है |

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

 

Example 1 :- Example Of jQuery fadeIn() Method

fadeIn() Method की मदद से आप किसी HTML elements जिसकी की दृश्यता या visibility Web Page नहीं है उसे देख सकते हैं |

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
    });
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

 

 

Example 2 :- Example Of jQuery fadeOut() Effect

fadeOut() Method की मदद से आप किसी HTML elements के दृश्यता या visibility को फीका कर सकते हैं |

 

$("button").click(function(){

    $("#div1").fadeOut();

    $("#div2").fadeOut("slow");

    $("#div3").fadeOut(3000);

});

 

Example 3 :- Example Of jQuery fadeToggle() Effect

अगर किसी HTML elements के दृश्यता या visibility नहीं है तो fadeToggle() Method के मदद से आप उसकी visibility ला सकते हो और अगर HTML elements Visible है तो fadeToggle() Method के मदद से आप उसकी visibility ख़तम सकते हो |

$("button").click(function(){

    $("#div1").fadeToggle();

    $("#div2").fadeToggle("slow");

    $("#div3").fadeToggle(3000);

});

 

Example 4 :- Example Of jQuery fadeTo() Effect

इसके मदद से आप Web Page में HTML elements की opacity या अस्पष्टता को नियंत्रित कर सकते है | अगर किसी HTML elements की opacity 1 है तो elements पूरा तरह से गयाब होगा और अगर opacity 1 से कम है जैसे की 0.9 से 01. तो opacity उतना ज्यादा होते जायेगा |

$("button").click(function(){

    $("#div1").fadeTo("slow", 0.15);

    $("#div2").fadeTo("slow", 0.4);

    $("#div3").fadeTo("slow", 0.7);

});

 

Next:- jQuery Hide Effects:-