/
  • یه مشکل با animate

  • ارسال پاسخ   امتیاز موضوع:
    • 0 رأی - میانگین امیتازات: 0
    • 1
    • 2
    • 3
    • 4
    • 5

    حالت موضوعی | حالت خطی یه مشکل با animate
    نویسنده پیام
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 620
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 729
    ( 207 تشکر در 117 ارسال )
    ارسال: #1
    یه مشکل با animate
    آقایون سلام.
    این کدی که نوشتم اصلا به دلم نمیشینه.
    اگر اجرا کنید متوجه میشید چرا !
    کد جی کوئری
    کد:
    <script>
    $(document).ready(function(){
      $("#left-j").hover(function(){
              $("#left-j").animate({width:"200px"});
              $(".tx").fadeIn(500);
         },function(){
        $("#left-j").animate({width:"20px"});
         $(".tx").fadeOut(500);;
      });
    });
    </script>
    کد css :
    کد:
    #left-j{
    width:20px;
    height:250px;
    background-color:#CC00CC;
    position:absolute;
    left:0px;
    top:200px;}
    کد html :
    کد:
    <div id="left-j">
    <input type="text" name="ee" class="tx" style="display:none"/>
    <input type="submit" class="tx" style="display:none"/>
    </div>
    ----------------
    بنظرتون چیکار کنم خوشگل اجرا بشه ؟
    یعنی input ها همراه با animate ظاهر و مخفی بشن.
    ----------------
    از دایو های تو در تو هم استفاده کردم جالب نشد.
    --------------
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    (آخرین ویرایش در این ارسال: ۱۳۹۱ آبان ۳۰ ۰۵:۰۶ عصر، توسط pary_daryayi.)
    ۱۳۹۱ آبان ۳۰ ۰۵:۰۴ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    molana آفلاین
    چالیست - chalist
    *******

    ارسال‌ها: 1,764
    تاریخ عضویت: ۱۳۸۷ آذر ۳۰
    اعتبار: 60
    تشکرها : 1644
    ( 1550 تشکر در 1015 ارسال )
    ارسال: #2
    RE: یه مشکل با animate
    اصلن نفهمیدم منظورت از این کد چیه؟!؟!

    ولی من فکر می کنم به جای فید کردن از animate استفاده کنی خیلی بهتره
    __________________________________________________________________________
    همه جوره اش رو داریم ظاهرن
    ۱۳۹۱ آبان ۳۰ ۰۵:۲۲ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : pary_daryayi
    Hamid آفلاین
    حمید رضا رحیمی
    ****

    ارسال‌ها: 577
    تاریخ عضویت: ۱۳۹۰ آبان ۹
    اعتبار: 20
    تشکرها : 554
    ( 368 تشکر در 231 ارسال )
    ارسال: #3
    RE: یه مشکل با animate
    فکر میکنم اینو میخوای

    کد PHP:
    $("#left-j").mouseover(function(){
            $(
    "#left-j").animate({width:"200px"}, function() {
                 $(
    ".tx").fadeIn(500);
            });
        });
         
        $(
    "#left-j").mouseout(function(){
            $(
    "#left-j").animate({width:"20px"});
            $(
    ".tx").fadeOut(500);;
        }); 
    __________________________________________________________________________
    ۱۳۹۱ آبان ۳۰ ۰۶:۱۶ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : pary_daryayi undefined
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 620
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 729
    ( 207 تشکر در 117 ارسال )
    ارسال: #4
    RE: یه مشکل با animate
    ممنونم . من اصلا نمیخوام input ها با fadein یا Fadeout مشخص بشن . میخوام خیلی ساده همراه animate بدون هیچ افکتی بیان .ولی چون راه خوبی به ذهنم نرسید از fade استفاده کردم.
    من میخوام تقریبا یه چیزی مثل قسمت پایین این سایت داشته باشم .
    the site
    با این تفاوت که input ها هیچ افکتی نداشته باشن . فقط میخوام از animate استفاده کنم . display:block هم برای input ها امتحان کردم . جالب نمیشه.
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    (آخرین ویرایش در این ارسال: ۱۳۹۱ آبان ۳۰ ۰۶:۳۴ عصر، توسط pary_daryayi.)
    ۱۳۹۱ آبان ۳۰ ۰۶:۳۴ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    undefined غایب
    احسان
    *******

    ارسال‌ها: 2,088
    تاریخ عضویت: ۱۳۸۸ مهر ۲۹
    اعتبار: 76
    تشکرها : 2005
    ( 2071 تشکر در 1219 ارسال )
    ارسال: #5
    RE: یه مشکل با animate
    js
    کد:
    $(document).ready(function(){
        $("#left-j").hover(function()
        {
            $("#left-j").stop().animate({width:"200px"},500);
            $('#content').show(1);
                $('.a').animate({marginLeft:'10px'},600,function(){$(this).animate({width:'​160px'},500).animate({height:'30px'},250);});
                $('.b').animate({marginLeft:'10px'},700,function(){$(this).animate({width:'​160px'},500).animate({height:'30px'},250);});
                $('.c').animate({marginLeft:'10px'},800,function(){$(this).animate({width:'​160px'},500).animate({height:'30px'},250);});
                $('.d').animate({marginLeft:'10px'},900,function(){$(this).animate({width:'​160px'},500).animate({height:'30px'},250,function(){
                    $('.button-linkHole').fadeIn('slow');
                });});
                                
         },function()
         {
            $('#content').fadeOut(1);
            $("#left-j").stop().animate({width:"20px"},500);    
            // reset
            $('.a,.b,.c,.d').stop().css({'margin-left':'-180px','width':'1px','height':'1px'});
            $('.button-linkHole').hide(1);
        });
    });

    html
    کد:
    <div id="left-j">
        <div align="center" style="margin-top:23px;" id="content">
    <input type="text" class="a" /><br />
    <input type="text" class="b" /><br />
    <input type="text" class="c" /><br />
    <input type="text" class="d" /><br />
    <div class="button-linkHole" style="display:none">
        <input type="submit" name="sub" value="Send" class="button-link" />
    </div>
        </div>
    </div>

    css
    کد:
    #left-j{
    width:20px;
    height:250px;
    background-color:#069;
    position:absolute;
    left:0px;
    top:200px;
    border-radius:0px 5px 5px 0px;
    -moz-border-radius:0px 5px 5px 0px;
    -webkit-border-radius:0px 5px 5px 0px;
    overflow:hidden;
    }

    input {
        background-repeat:repeat-x;
        border:1px solid #333;
        width: 1px; /* 160 */
        height:1px;
        color:#333333;
        padding:0px;
        margin-right:4px;
        margin-bottom:8px;
        font-family:tahoma, arial, sans-serif;
        margin-left:-180px;
        overflow:hidden;
        border-radius:3px;
        -moz-border-radius:3px;
         -webkit-border-radius:3px;    
    }
    .button-link {
        padding: 10px 15px;
        background: #4479BA;
        color: #FFF;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: solid 1px #20538D;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        margin-left:10px;
        width:60px;
        height:45px;
        cursor:pointer;
    }
    .button-link:hover {
        background: #356094;
        border: solid 1px #2A4E77;
        text-decoration: none;
    }
    .button-link:active {
        -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
        background: #2E5481;
        border: solid 1px #203E5F;
    }

    کدش رو خیلی وقت پیش زده بودم، روی سورست پیادش کردم(البته یه مقدار با سلیقه خودم).
    موفق باشی.
    __________________________________________________________________________
    هر چیزی که در جستن آنی آنی...
    ۱۳۹۱ آبان ۳۰ ۱۰:۰۷ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : pary_daryayi Hamid
    masoudmanson آفلاین
    MiM Me3 MeTaL
    ****

    ارسال‌ها: 374
    تاریخ عضویت: ۱۳۹۰ تير ۱۱
    اعتبار: 22
    تشکرها : 541
    ( 356 تشکر در 179 ارسال )
    ارسال: #6
    RE: یه مشکل با animate
    سلام
    به نظر من اینجوری بهتره Blush
    به جای اینکه بیای و وقتی که رو اون دایو میری width اش رو تغییر بدی
    بیا و position رو absolute بزار و به صورت default بگو که مثلا lleft:-200px و وقتی میری روش left : 0
    اینجوری خیلی بهتر میشه
    حالا اگه خواستی کدش رو هم برات مینویسم Big Grin
    __________________________________________________________________________
    [تصویر:  6p9kd9bhgb7hu6wgcu3g.gif]
    ۱۳۹۱ آبان ۳۰ ۱۰:۴۱ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : pary_daryayi
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 620
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 729
    ( 207 تشکر در 117 ارسال )
    ارسال: #7
    RE: یه مشکل با animate
    ای وای مرسی آقا احسان اصلا راضی به زحمت نبودم ! خیلی خوشگله.Smile
    آخه شماها چطور فرصت میکنید اینهمه زبان رو بخونید و مسلط بشید!!
    (اسمایلی حسودی )Tongue

    ------------------------------------------
    نقل قول: به جای اینکه بیای و وقتی که رو اون دایو میری width اش رو تغییر بدی
    بیا و position رو absolute بزار و به صورت default بگو که مثلا lleft:-200px و وقتی میری روش left : 0
    اینجوری خیلی بهتر میشه
    حالا اگه خواستی کدش رو هم برات مینویسم
    ممنونم آقا مسعود . فکر میکنم اینو یه بار امتحان کردم ولی چون به کدهای css مسلط نبودم یه مقدار حالت خشک و بی روحی گرفت.
    نه مرسی زحمت نکشید.
    فکر کنم خودم باید بیشتر بخونم.Blush
    ---------------------------------------------
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    (آخرین ویرایش در این ارسال: ۱۳۹۱ آبان ۳۰ ۱۱:۱۳ عصر، توسط pary_daryayi.)
    ۱۳۹۱ آبان ۳۰ ۱۱:۰۸ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : masoudmanson
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 620
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 729
    ( 207 تشکر در 117 ارسال )
    ارسال: #8
    RE: یه مشکل با animate
    یه سوال !؟
    width تگ های input برای شما بعد از show شدن به 160px میرسه ؟ من تست کردم فقط height تگ های input کار میکنه . چرا ؟
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    ۱۳۹۱ آذر ۱ ۱۰:۴۴ صبح
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    undefined غایب
    احسان
    *******

    ارسال‌ها: 2,088
    تاریخ عضویت: ۱۳۸۸ مهر ۲۹
    اعتبار: 76
    تشکرها : 2005
    ( 2071 تشکر در 1219 ارسال )
    ارسال: #9
    RE: یه مشکل با animate
    بله، تغییر میکنه. از jquery 1.8.0 استفاده کن ببین مشکلت برطرف میشه یا نه
    __________________________________________________________________________
    هر چیزی که در جستن آنی آنی...
    ۱۳۹۱ آذر ۱ ۰۹:۲۳ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : pary_daryayi
    pary_daryayi آفلاین
    Mermaid
    ****

    ارسال‌ها: 620
    تاریخ عضویت: ۱۳۹۱ خرداد ۲۸
    اعتبار: 19
    تشکرها : 729
    ( 207 تشکر در 117 ارسال )
    ارسال: #10
    RE: یه مشکل با animate
    مرسی آقا احسان . با 1.8.0 حل شد.
    __________________________________________________________________________
    آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
    ۱۳۹۱ آذر ۶ ۱۰:۳۸ صبح
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : undefined
    « قدیمی تر | تازه‌ تر »

    ارسال پاسخ
    پرش به انجمن:


    کاربرانِ درحال بازدید از این موضوع: 1 مهمان
    IranPHP.org | تماس با ما | بازگشت به بالا | بازگشت به محتوا | بایگانی | پیوند سایتی RSS