نمایش نتایج 1 تا 5 از 5

نام تاپیک: انیمشن دادن در html

Hybrid View

پست قبلی پست قبلی   پست بعدی پست بعدی
  1. #1

    انیمشن دادن در html

    سلام
    ببخشید من یک سوال داشتم:

    من امروز می خوام کار کردن با انیمیشن ها رو یاد بگیرم و البته نسبت به سنم کمی دیر شده اما خب چه میشه کرد به قول قدیمی ها گذر پوست به دباغ خونه میفته.



    من یک div درست کردم و گفتم هروقت که عرض این div تغییر کرد تغییر عرض در زمان دو ثانیه انجام بشه. اما کد کار نمی کنه:


    کد HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div {
        width: 0;
        height: 0;
        background: red;
        transition: width 2s;
        display: none;
    }
    
    /*div:hover {
        width: 300px;
    }
    */
    
    .mystyle {
        width: 100px;
        height: auto;
        padding: 25px;
        background-color: coral;
        color: white;
        font-size: 25px;
        display: block;
    }
    
    </style>
    </head>
    <body>
    
    <h1>The transition Property</h1>
    
    <p>Hover over the div element below, to see the transition effect:</p>
    <div id="mor">
        <p>ali</p>
        <p>ali</p>
        <p>ali</p>
        <p>ali</p>
        <p>ali</p>
        <p>ali</p>
        <p>ali</p>
        <p>ali</p>
    </div>
    
    <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
    
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    
    
    <script type="text/javascript">
        
      let a = 1;
              let element = document.getElementById("mor");
    
    function myFunction() {
      // document.getElementById("mor").innerHTML = "Hello World";
      if (a ===1) {
             element.classList.add("mystyle");
             a=0;
      }
    else if (a===0) {
        a = 1;
                 element.classList.remove("mystyle");
    
    }
    
    }
    
    
    
    </script>
    
    
    </script>
    
    </body>
    </html>



    چیزی که بیشتر هم عچیبه اینه که اگر اون قسمت کد که کامنتش کردم رو از حالت کامنت خارج کنم کار مییکنه.


    خیلی ممنون میشم اگه کسی بنده رو راهنمایی کنه

  2. #2

    نقل قول: انیمشن دادن در html

    اگه براتون مقدوره سعی کنین از کتابخانه ها استفاده کنین مخصوصا Jquery
    کد نویسی با Jquery خیلی کار ها رو راحت میکنه مثلا برای درخواست شما فقط کافیه کد زیر رو بنویسی

    کد HTML:
    <div id="id1" clas="mystyle"></div>
    
    <script type="text/javascript">
    myFunction=function(){
        $("#id1").slideToggle(800);
    } 
    </script>
    اگه بدون کتابخانه میخوای یه نمونه تویه لینک زیر هست
    https://jsfiddle.net/cferdinandi/qgpxvhhb/40/
    میتونی یه نیگاه بندازی بهش

  3. #3

    نقل قول: انیمشن دادن در html

    از جی کوئری نمیخوام استفاده کنم.
    دست شما درد نکنه بابت لینکی که فرستادید.

    ممنون میشم دلیل اینکه قطعه کدی که خودم نوشتم کار نمی کنه رو بگید.
    چون تا خودم منطق کار رو نفهمم نگاه کردن به کدهای پیشرفته تر کمکی بهم نمی کنه.

  4. #4

    نقل قول: انیمشن دادن در html

    نقل قول نوشته شده توسط shahin53 مشاهده تاپیک
    از جی کوئری نمیخوام استفاده کنم.
    دست شما درد نکنه بابت لینکی که فرستادید.

    ممنون میشم دلیل اینکه قطعه کدی که خودم نوشتم کار نمی کنه رو بگید.
    چون تا خودم منطق کار رو نفهمم نگاه کردن به کدهای پیشرفته تر کمکی بهم نمی کنه.
    این کدی که من قرار دادم از Jquery استفاده کردم خیلی ساده و راحت

    نمی فهمم چرا نمی خواین از Jquery استفاده بکنین دلیل خاصی دارین ؟

  5. #5

    نقل قول: انیمشن دادن در html

    کار با انیمیشن در html و با css3 ساده است، شاید لینک زیر به شما کمک کنه
    https://www.datadars.com/css/css-adv...s3_animations/

تاپیک های مشابه

  1. قرار دادن فلش در Html
    نوشته شده توسط b3dnet در بخش طراحی وب (Web Design)
    پاسخ: 2
    آخرین پست: سه شنبه 21 خرداد 1392, 21:14 عصر
  2. وارد کردن متن حاوی تگ html و نشان دادن در صفحه
    نوشته شده توسط silverfox در بخش ASP.NET Web Forms
    پاسخ: 3
    آخرین پست: دوشنبه 22 تیر 1388, 15:37 عصر
  3. سوال: قرار دادن صفحه html در contentPlaceHolder بصورت داینامیک
    نوشته شده توسط mehrpars در بخش ASP.NET Web Forms
    پاسخ: 0
    آخرین پست: پنج شنبه 18 تیر 1388, 01:39 صبح
  4. قرار دادن فایلهای HTML تصویر دار در بانک و نحوه جستجو در انها
    نوشته شده توسط nassim_20 در بخش مباحث عمومی دلفی و پاسکال
    پاسخ: 8
    آخرین پست: سه شنبه 29 مرداد 1387, 14:44 عصر
  5. قرار دادن فایل PHP در HTML و ارتباط آنها
    نوشته شده توسط nasr در بخش PHP
    پاسخ: 4
    آخرین پست: چهارشنبه 13 آبان 1383, 17:30 عصر

برچسب های این تاپیک

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •