Bug: Jquery Simple Spy Tidak Bekerja Pada Jquery 1.4.3+ - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / Bug: Jquery Simple Spy Tidak Bekerja Pada Jquery 1.4.3+
Masalah ini bergotong-royong sudah cukup usang dibicarakan pada lembaga Bug: jQuery Simple Spy Tidak Bekerja pada jQuery 1.4.3+

Masalah ini bergotong-royong sudah cukup usang dibicarakan pada lembaga Stackoverflow, hanya saja Saya gres mengetahui ini sekitar setengah tahun yang kemudian dan gres mendalami cara kerjanya pada bulan-bulan ini. jQuery Simple Spy tidak bekerja pada jQuery 1.4.3+

Pertama-tama akan Saya tunjukkan imbas animasi spylist yang sanggup berjalan lancar dengan framework jQuery 1.3.2:

Lihat Efek Animasi

Sekarang coba Anda ganti versi jQuery menjadi 1.5.2 atau yang lain di atas 1.4.3, klik Run dan lihat hal jelek apa yang akan terjadi pada imbas animasi:

Mengganti versi jQuery

Seperti yang telah Anda lihat bahwa elemen <ul class='spy'></ul> tidak memuat daftar gres dan itu menciptakan semuanya menghilang ketika semua daftar telah memudar.

Masalahnya Cuma Satu

Masalahnya ada pada baris ini:

display tidak termasuk dalam properti yang sanggup dianimasikan

Elemen daftar/list telah diset .css() dengan nilai display:'none', padahal di sini kita tahu bahwa rantai animasi yang berjalan hanya berputar di sekitar opacity dan height sedangkan animasi display tidak pernah terjadi. Dan kenyataannya, display bukan merupakan properti jQuery yang sanggup dianimasikan (baca perkenalan properti animasi jQuery):

// 2. effect         function spy() {     // insert a new item with opacity and height of zero     var $insert = $(items[currentItem]).css({height:0,opacity:0,display:'none'    }).prependTo($list);      // fade the LAST item out     $list.find('> li:last').animate({opacity:0}, 1000, function() {         // increase the height of the NEW first item         $insert.animate({height:height}, 1000).animate({opacity:1}, 1000);         $(this).remove();     });      currentItem++;     if (currentItem >= total) {         currentItem = 0;     }      setTimeout(spy, interval) }

Sampai di sini intinya duduk perkara sudah selesai. Hanya saja Saya telah menambahkan beberapa pembaharuan untuk memperhalus imbas animasinya. Sebuah perilaku yang sangat umum apabila seseorang menginginkan tampilan yang berbeda dari plugin ini demi kepuasan pribadi. Anda sanggup saja menambahkan margin sebagai pembatas antar daftar, atau menambahkan padding untuk menawarkan kesan bahwa setiap elemen daftar merupakan satu unit boks berisi gosip tertentu yang dikemas dengan rapi. Hingga ketika Anda mencoba melaksanakan semua modifikasi itu, Anda akan menemui satu lagi imbas yang tidak Anda inginkan:

Lihat Contoh Modifikasi

Saya telah membuang imbas animasi transparasi pada pemuatan daftar gres untuk memperjelas pandangan mengenai apa yang menciptakan imbas animasi menjadi tersentak. Di sini kita akan memfokuskan diri pada imbas penyisipan daftar gres dan mengabaikan imbas pemudaran daftar di bawahnya:

Masalah ini bergotong-royong sudah cukup usang dibicarakan pada lembaga Bug: jQuery Simple Spy Tidak Bekerja pada jQuery 1.4.3+
Fokuskan pandangan pada imbas penyisipan daftar gres dan abaikan imbas pemudaran daftar di bawahnya

Animasi pertama memperlihatkan bahwa imbas pemuatan daftar gres akan tampak sedikit tersentak sebab efek padding. Itu terjadi sebab pemuatan daftar gres dilakukan begitu saja dengan cara menyisipkan elemen <li> yang mengandung nilai height sebesar 0px.

Jika kita tidak memakai padding pada elemen ini semenjak awal, efek-efek menyentak tersebut intinya tidak akan timbul. Dalam CSS Box-Model, padding dan border-width tidak termasuk dalam perhitungan width dan height pada elemen. Ini berarti bahwa meskipun kita telah mengeset nilai height sebesar 0px pada elemen, namun sebab pada ketika yang sama kita juga telah menerapkan padding sebesar 10px, maka ukuran elemen setinggi 0 piksel akan sama artinya dengan 20 piksel.

Animasi ke dua menampilkan imbas yang jauh lebih lembut sebab di sini Saya tidak lagi memakai animasi $insert.animate({height:N}, animSpeed) melainkan cukup memakai $insert.slideDown(animSpeed).

.slideDown() berbeda dengan .animate({height:N}) sebab .slideDown() tidak hanya akan menganimasikan tinggi elemen, tetapi juga akan menganimasikan margin dan padding terkait pada ketika yang bersamaan:

var elemdisplay = {},     iframe, iframeDoc,     rfxtypes = /^(?:toggle|show|hide)$/,     rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,     timerId,     fxAttrs = [        // height animations         [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],        // width animations         [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],         // opacity animations         [ "opacity" ]     ],     fxNow;  // blablabla...

Dan berikut ini ialah keseluruhan plugin yang sudah Saya perbaiki sedikit:

(function($) { $.fn.simpleSpy = function(limit, animSpeed, interval, startDelay) {     limit      = limit || 4;     interval   = interval || 4000;     startDelay = startDelay || 0;     animSpeed  = animSpeed || 1000;          return this.each(function() {         // 1. setup             // capture a cache of all the Interesting title s             // chomp the list down to limit li elements         var $list       = $(this),             run         = true,             items       = [], // uninitialised             currentItem = limit,             total       = 0, // initialise later on             start       = 0, //when the effect first starts             height      = $list.find('> li:first').height(),             theMargin   = $list.find('> li:first').css('marginTop') + $list.find('> li:first').css('marginBottom');                      // capture the cache         $list.find('> li').each(function() {             items.push('<li>' + $(this).html() + '</li>');         });                  $list.bind("stop", function() {             run = false         }).bind("start", function() {             run = true         });                  total = items.length;                  $list.wrap('<div class="spyWrapper"></div>').parent().css({height:height+theMargin*limit});          $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();          // 2. effect                 function spy() {             if (run) {                 // insert a new item ass hidden element (display:none)                 var $insert = $(items[currentItem]).hide().prependTo($list);                  // fade the LAST item out                 $list.find('> li:last').animate({opacity:0}, animSpeed, function() {                     // increase the height of the NEW first item                     $insert.css('opacity', 0).slideDown(animSpeed, function() {                         $insert.animate({opacity:1}, animSpeed);                     });                     $(this).remove();                 });                              currentItem++;                 if (currentItem >= total) {                     currentItem = 0;                 }             }                 setTimeout(spy, interval)         }                  if (start < 1) {             setTimeout(spy, startDelay);             start++;         } else {             spy();         }              }); };      })(jQuery);

Konfigurasi jQuery Simple Spy

Buat sebuah grup daftar dengan kelas atau ID tertentu menyerupai ini:

<ul id='spylist'>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li> </ul>

Seleksi elemen tersebut kemudian terapkan fungsi .simpleSpy():

$(document).ready(function() {     $('ul#spylist').simpleSpy(4, 1000, 5000, 0).bind("mouseenter", function() {         // stop the animation when mouseenter         $(this).trigger("stop")     }).bind("mouseleave", function() {         // continue the animation when mouseleave         $(this).trigger("start")     }); });

Variabel:

$('#selektor').simpleSpy(limit, animSpeed, interval, startDelay);
  • Tentukan batasan daftar yang akan ditampilkan pada variabel limit
  • Tentukan kecepatan animasi pada variabel animSpeed
  • Tentukan interval animasi pada variabel interval
  • Tentukan delay start pada variabel startDelay

Lihat Demo Download Revisi


Sumber https://www.dte.web.id/

Bug: Jquery Simple Spy Tidak Bekerja Pada Jquery 1.4.3+

Masalah ini bergotong-royong sudah cukup usang dibicarakan pada lembaga Bug: jQuery Simple Spy Tidak Bekerja pada jQuery 1.4.3+

Masalah ini bergotong-royong sudah cukup usang dibicarakan pada lembaga Stackoverflow, hanya saja Saya gres mengetahui ini sekitar setengah tahun yang kemudian dan gres mendalami cara kerjanya pada bulan-bulan ini. jQuery Simple Spy tidak bekerja pada jQuery 1.4.3+

Pertama-tama akan Saya tunjukkan imbas animasi spylist yang sanggup berjalan lancar dengan framework jQuery 1.3.2:

Lihat Efek Animasi

Sekarang coba Anda ganti versi jQuery menjadi 1.5.2 atau yang lain di atas 1.4.3, klik Run dan lihat hal jelek apa yang akan terjadi pada imbas animasi:

Mengganti versi jQuery

Seperti yang telah Anda lihat bahwa elemen <ul class='spy'></ul> tidak memuat daftar gres dan itu menciptakan semuanya menghilang ketika semua daftar telah memudar.

Masalahnya Cuma Satu

Masalahnya ada pada baris ini:

display tidak termasuk dalam properti yang sanggup dianimasikan

Elemen daftar/list telah diset .css() dengan nilai display:'none', padahal di sini kita tahu bahwa rantai animasi yang berjalan hanya berputar di sekitar opacity dan height sedangkan animasi display tidak pernah terjadi. Dan kenyataannya, display bukan merupakan properti jQuery yang sanggup dianimasikan (baca perkenalan properti animasi jQuery):

// 2. effect         function spy() {     // insert a new item with opacity and height of zero     var $insert = $(items[currentItem]).css({height:0,opacity:0,display:'none'    }).prependTo($list);      // fade the LAST item out     $list.find('> li:last').animate({opacity:0}, 1000, function() {         // increase the height of the NEW first item         $insert.animate({height:height}, 1000).animate({opacity:1}, 1000);         $(this).remove();     });      currentItem++;     if (currentItem >= total) {         currentItem = 0;     }      setTimeout(spy, interval) }

Sampai di sini intinya duduk perkara sudah selesai. Hanya saja Saya telah menambahkan beberapa pembaharuan untuk memperhalus imbas animasinya. Sebuah perilaku yang sangat umum apabila seseorang menginginkan tampilan yang berbeda dari plugin ini demi kepuasan pribadi. Anda sanggup saja menambahkan margin sebagai pembatas antar daftar, atau menambahkan padding untuk menawarkan kesan bahwa setiap elemen daftar merupakan satu unit boks berisi gosip tertentu yang dikemas dengan rapi. Hingga ketika Anda mencoba melaksanakan semua modifikasi itu, Anda akan menemui satu lagi imbas yang tidak Anda inginkan:

Lihat Contoh Modifikasi

Saya telah membuang imbas animasi transparasi pada pemuatan daftar gres untuk memperjelas pandangan mengenai apa yang menciptakan imbas animasi menjadi tersentak. Di sini kita akan memfokuskan diri pada imbas penyisipan daftar gres dan mengabaikan imbas pemudaran daftar di bawahnya:

Masalah ini bergotong-royong sudah cukup usang dibicarakan pada lembaga Bug: jQuery Simple Spy Tidak Bekerja pada jQuery 1.4.3+
Fokuskan pandangan pada imbas penyisipan daftar gres dan abaikan imbas pemudaran daftar di bawahnya

Animasi pertama memperlihatkan bahwa imbas pemuatan daftar gres akan tampak sedikit tersentak sebab efek padding. Itu terjadi sebab pemuatan daftar gres dilakukan begitu saja dengan cara menyisipkan elemen <li> yang mengandung nilai height sebesar 0px.

Jika kita tidak memakai padding pada elemen ini semenjak awal, efek-efek menyentak tersebut intinya tidak akan timbul. Dalam CSS Box-Model, padding dan border-width tidak termasuk dalam perhitungan width dan height pada elemen. Ini berarti bahwa meskipun kita telah mengeset nilai height sebesar 0px pada elemen, namun sebab pada ketika yang sama kita juga telah menerapkan padding sebesar 10px, maka ukuran elemen setinggi 0 piksel akan sama artinya dengan 20 piksel.

Animasi ke dua menampilkan imbas yang jauh lebih lembut sebab di sini Saya tidak lagi memakai animasi $insert.animate({height:N}, animSpeed) melainkan cukup memakai $insert.slideDown(animSpeed).

.slideDown() berbeda dengan .animate({height:N}) sebab .slideDown() tidak hanya akan menganimasikan tinggi elemen, tetapi juga akan menganimasikan margin dan padding terkait pada ketika yang bersamaan:

var elemdisplay = {},     iframe, iframeDoc,     rfxtypes = /^(?:toggle|show|hide)$/,     rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,     timerId,     fxAttrs = [        // height animations         [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],        // width animations         [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],         // opacity animations         [ "opacity" ]     ],     fxNow;  // blablabla...

Dan berikut ini ialah keseluruhan plugin yang sudah Saya perbaiki sedikit:

(function($) { $.fn.simpleSpy = function(limit, animSpeed, interval, startDelay) {     limit      = limit || 4;     interval   = interval || 4000;     startDelay = startDelay || 0;     animSpeed  = animSpeed || 1000;          return this.each(function() {         // 1. setup             // capture a cache of all the Interesting title s             // chomp the list down to limit li elements         var $list       = $(this),             run         = true,             items       = [], // uninitialised             currentItem = limit,             total       = 0, // initialise later on             start       = 0, //when the effect first starts             height      = $list.find('> li:first').height(),             theMargin   = $list.find('> li:first').css('marginTop') + $list.find('> li:first').css('marginBottom');                      // capture the cache         $list.find('> li').each(function() {             items.push('<li>' + $(this).html() + '</li>');         });                  $list.bind("stop", function() {             run = false         }).bind("start", function() {             run = true         });                  total = items.length;                  $list.wrap('<div class="spyWrapper"></div>').parent().css({height:height+theMargin*limit});          $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();          // 2. effect                 function spy() {             if (run) {                 // insert a new item ass hidden element (display:none)                 var $insert = $(items[currentItem]).hide().prependTo($list);                  // fade the LAST item out                 $list.find('> li:last').animate({opacity:0}, animSpeed, function() {                     // increase the height of the NEW first item                     $insert.css('opacity', 0).slideDown(animSpeed, function() {                         $insert.animate({opacity:1}, animSpeed);                     });                     $(this).remove();                 });                              currentItem++;                 if (currentItem >= total) {                     currentItem = 0;                 }             }                 setTimeout(spy, interval)         }                  if (start < 1) {             setTimeout(spy, startDelay);             start++;         } else {             spy();         }              }); };      })(jQuery);

Konfigurasi jQuery Simple Spy

Buat sebuah grup daftar dengan kelas atau ID tertentu menyerupai ini:

<ul id='spylist'>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li>     <li>         <h4>Judul Item</h4>         Teks di sini teks di sini teks di sini...     </li> </ul>

Seleksi elemen tersebut kemudian terapkan fungsi .simpleSpy():

$(document).ready(function() {     $('ul#spylist').simpleSpy(4, 1000, 5000, 0).bind("mouseenter", function() {         // stop the animation when mouseenter         $(this).trigger("stop")     }).bind("mouseleave", function() {         // continue the animation when mouseleave         $(this).trigger("start")     }); });

Variabel:

$('#selektor').simpleSpy(limit, animSpeed, interval, startDelay);
  • Tentukan batasan daftar yang akan ditampilkan pada variabel limit
  • Tentukan kecepatan animasi pada variabel animSpeed
  • Tentukan interval animasi pada variabel interval
  • Tentukan delay start pada variabel startDelay

Lihat Demo Download Revisi


Sumber https://www.dte.web.id/
jQuery Lanjutan Masalah
Langganan: Posting Komentar (Atom)