انجمن‌های فارس وب

نسخه کامل: نمایش یک Div یا جدول به آهستگی
شما در حال بازدید از بایگانی ارسال های انجمن هستید این نسخه کامل نیست : برای مشاهده نسخه کامل اینجا کلیک کنید
سلام

در بعضی سایت ها بعضی از جدول ها و یا Div ها هست که مخفی هستن و وقتی کاربر روی لینکی کلیک می کنه اونها نمایش داده می شن اما به آهستگی باز می شن و نه یک دفعه چطور باید این کار انجام بدم

مثل [ جهت مشاهده لينك عضو شويد ! ]قسمت ورود اعضاء

با تشکر
نمی‌دونم تا چه حد به حاوا اسکریپت آشنایی دارید؛ اما دستور کلی افزودن خصیصه‌ی margin-top به DIV محتویات اصلی و یا افزودن خصیصه‌ی height به همون بخش هستش. عمل افزودن توسط یک تابع نوشته و توسط توابعی مانند setTimeout و یا setInterval مکرراً اجرا می‌شن تا حدی که اون فاصله برابر با فاصله‌ی دلخواه بشه.
سلام
من به HTML و ASP.Net مسلطم اما جاوا خیلی کم در ابتدایی می شه یکم بیشتر توضیح بدین یا نمونه کد اگر زحمتی نیست
ببخشید
کد مورد نظر شما با تغییراتی که اعمال کردم به شکل زیر هستش:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript">
    var status = "collapse";
    var containerId = "content";
    var height = 40;
    
    showHide = function(containerId){
        if(this.status == "expand" && containerId != this.containerId)
        this.status = "collapse";this.height = height;
        if(!this.intervalId)this.intervalId = setInterval("collapse()",10);
    }
    
    collapse = function(){
        ele = document.getElementById(this.containerId);
        heightArray = ele.style.height.split("px");
        
        if(this.status == "collapse"){
            if(heightArray[0] < this.height){
                ele.style.height = (parseInt(heightArray[0])+1)+"px";
            }else{
                clearInterval(this.intervalId);
                this.intervalId = 0;
                this.status = "expand";
            }
        }
        
        if(this.status == "expand"){
            if(heightArray[0] > 0){
                ele.style.height = (parseInt(heightArray[0])-1)+"px";
            }else{
                clearInterval(this.intervalId);
                this.intervalId = 0;
                this.status = "collapse";
            }
        }
    }
</script>
</head>
<body>

<div  id="content" style="height:0px;overflow:hidden;background: #000000; color: #ffffff">محتوای لایه مورد نظر    </div>  
    
    <a  href="javascript: showHide('content')">لینک مربوطه</a>    

</body>
</html>


موفق باشید.

مرجع آدرس ها