پنهان سازی با jQuery در طراحی سایت
با استفاده از کدهای jQuery شما می توانید پنل fade in/out را در طراحی سایت خود جایدهی نمایید و جلوه خاص به صفحات سایت خود و طراحی وب سایت خود ببخشید. jQuery عناصر زیر را در متد پنهان سازی خود دارد.
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
در متد jQuery fadeIn() موجب نمایش المان های پنهان شده می شود.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
و با فراخوانی کد jQuery می توانید این قابلیت را به صفحه سایت خود ببخشید.
در متد fadeOut() method موجب پنهان شدن المان های مورد نظر در صفحه وب سایت شما می شود.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
برای فراخوانی کدهی بالا در طراحی سایت با کدهای html به صورت زیر عمل می نمایید.
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
به آسانی با کدهای jQuery می توانید نمایش زیبایی را از طراحی سایت خود در کنار سرعت بالا ایجاد نماییم و در نتیجه این عمل موجب جلب نظر کاربر خود شویم که این خود در سئو سایت ما تاثیرگذار خواهد بود.
منبع: پنهان سازی با jQuery در طراحی سایت
