animasi gelung jQuery dan kaedah mendapatkan size_jquery komponen

Contoh dalam artikel ini menerangkan kaedah animasi gelung jQuery dan mendapatkan saiz komponen. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Kata Pengantar

1. Kaedah animate() dalam jQuery membolehkan anda membuat animasi tersuai.

Kaedah animate() boleh mengendalikan hampir semua sifat CSS, tetapi apabila menggunakan animate(), semua nama sifat mesti ditulis dalam notasi Camel Contohnya, paddingLeft mesti digunakan bukannya padding-left dan marginRight mesti digunakan bukannya margin- kanan, tunggu. Selain itu, animasi warna tidak termasuk dalam perpustakaan jQuery teras. Jika anda perlu menjana animasi berwarna, anda perlu memuat turun pemalam Animasi Warna daripada jquery.com.

2. Melalui jQuery, ia adalah mudah untuk mengendalikan saiz elemen dan tetingkap penyemak imbas.
jQuery menyediakan sifat berikut untuk mendapatkan dimensi elemen dan tetingkap penyemak imbas.

2. Matlamat asas

Seperti yang ditunjukkan di bawah:

Buat dua butang dalam halaman web, satu butang boleh menukar saiz komponen antara paparan dan keadaan tersembunyi, dan satu butang boleh menukar animasi gelung antara keadaan mula dan berhenti

JQ Mudah tidak mempunyai fungsi menjeda dan memulakan main balik animasi Anda mesti memuat turun pemalam Jeda jQuery untuk melengkapkannya. Dalam contoh ini, animasi gelung hanya dikawal melalui JavaScript, jadi setiap jeda hanya boleh diganggu apabila badan gelung selesai sekali, dan fungsi menjeda dan bermula pada sebarang kedudukan rawak tidak boleh dicapai.

3. Proses pengeluaran

Berikut ialah semua kod halaman web, dan akan dijelaskan bahagian demi bahagian kemudian:

Salin kod Kod adalah seperti berikut:

 
 
     
         
         
         
         
selang var; 
var i = 0; 
var j = 0; 
function divanimate() { 
    $(".d_class").animate( {left : " =100px"}, 500); 
    $(".d_class").animate( {atas : " =100px" }, 500); 
    $(".d_class").animate( {left : "-=100px"}, 500); 
    $(".d_class").animate( {atas : "-=100px" }, 500); 
} 
kitaran fungsi() { 
    divanimate(); 
    interval = setInterval("divanimate()", 2000); 
} 
$(document).ready(function() { 
    $("#stop").klik(function() { 
        i ; 
        jika (i % 2 != 0) 
            kitaran(); 
        lain 
            clearInterval(selang); 
    }); 
    $("#show").klik(function() { 
        j ; 
        jika (j % 2 != 0) { 
            var txt = ""; 
            txt = "

高: " $("#d_id").height() "px"; 
            txt = "宽: " $("#d_id").width() "px

"; 
            $("#d_id").html(txt); 
        } lain { 
            var txt = ""; 
            $("#d_id").html(txt); 
        } 
    }); 
}) 
     
     
 
     
         
            显示/隐藏方块尺寸 
         
         
            开始/停止动画的循环 
         
       

            style="width: 100px; height: 100px; background-color: #000; position: absolute; top: 50px; color: #FFF; left:50px;">