يوجد في مكتبة الـ jquary تابعي إظهار وإخفاء جاهزين عند استدعاءهما يتم إخفاء و إظهار العنصر المراد

يتم استدعاؤهما بالشكل التالي

$("selector").show();
$("selector").hide();

مثال بسيط عن إظهار واخفاء عنصر الصورة

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("img").hide();
    });
    $("#show").click(function(){
        $("img").show();
    });
});
</script>
</head>
<body>
 
<img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" />
 
<button id="hide">Hide</button>
<button id="show">Show</button>
 
</body>
</html>

لإضافة حركة إلى العناصر أثناء إظهارها نستخدم التابع fade() وله عدة أشكال

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

التابع animate();

يمكن اضافة المزيد من التاثيرات على العناصر مثل تحريك الصورة او تكبيرها وغيرها من التأثيرات

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#main
{width:50% ; height:50%; postion:relative;}
img {width:50% position:absolute;}
</style>
</head>
<body>
 
<div id="main">
<img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" />
</div>
<script> 
$(document).ready(function(){
    $("img").click(function(){
        $("img").animate({
            width: '80%'
        });
    });
});
 
</script>
</body>
</html>

في المثال السابق قمنا بتغيير عرض الصورة من 50%إلى 80% يتم تنفيذ ذلك عند الضغظ على الصورة