將Gif動畫添加到複選框

我發現了很好的代碼，它可以使複選框風格化。將Gif動畫添加到複選框

HTML：

<input id="checkbox" type="checkbox" class="checkbox" /> 
<label id="checkbox_lab" for="checkbox" class="checkbox_lab"></label>

CSS：

.checkbox { 
    display: none; 
} 
.checkbox_lab { 
    background: url("images/off.png") no-repeat; 
    height: 28px; 
    width: 81px; 
    display: block; 
} 
.checkbox_lab_sel { 
    background: url("images/on.png") no-repeat; 
}

的Javascript（用了jQuery）：

$(document).ready(function(){ 
     $(".checkbox").change(function(){ 
      if($(this).is(":checked")){ 
       $(this).next("label").addClass("checkbox_lab_sel"); 
      }else{ 
       $(this).next("label").removeClass("checkbox_lab_sel"); 
      } 
     }); 
    });

據工作真的很好。我想「從開始到關閉，反之亦然」的好的切換動畫，這是保存在GIF動畫，但...我不是很擅長JS，不知道該怎麼做。有人有想法嗎？

來源

2012-08-22 Andy

聽起來像一個溫和的瘋狂的想法，但肯定你只是想要有你在那裏完全相同的代碼，但動畫顯示你想要的動畫，而不是兩個PNG圖像？第一次加載頁面時效果不佳，因爲這會顯示一個動畫，看起來有點奇怪。 –

嗯，這是我在網上找到的複選框風格化的解決方案，但我不堅持這個解決方案。我打開更好的方式來設置複選框的樣式（併爲背景^^）。 – Andy

在這裏你有一個快速example

HTML

<input id="checkbox" type="checkbox" class="checkbox" /> 
<label id="checkbox_lab" for="checkbox" class="checkbox_lab"></label>

CSS

.checkbox { 
    /*display: none;*/ 
} 
.checkbox_lab { 
    background: url("images/off.png") no-repeat; 
    height: 28px; 
    width: 81px; 
    display: block; 
} 
.checkbox_lab_sel { 
    background-image: url('http://cdn.rpxnow.com/rel/img/9a8269421303631316be4ab5e34870e1.gif'); 
}

的Javascript

$(".checkbox").change(function(){ 
    $('#checkbox_lab').toggleClass('checkbox_lab_sel'); 
     });

希望這有助於！

來源

2012-08-23 17:39:57 MCSI

將Gif動畫添加到複選框

回答

相關問題