如何使div框淡入和淡出div

Question

我目前在這里使用的是一個使用復選框顯示圖像和刪除圖像的頁面。 我有添加圖像並刪除圖像部分的工作。 我只是無法使圖像淡入淡出div。 有人可以幫忙嗎？

<html><head>
    <style>
        .overlay {
            display: none;
            position: absolute;

        }
        .right {
    position: absolute;
    right: 0px;
    width: 300px;
    border:3px solid #8AC007;
    padding: 10px;
}
        #map {
            position: relative;
            right: -780px;
            width: 200px;
            height: 200px;
            display: none;
            background: url(tn_bandannatop.png) 0 0;
        }
        #station_A { top: 5px; left: 85px }
        #station_B { top: 150px; left: 180px }
        .hover { color: green }
    </style>
<div id="map" >
        <span id="station_A" class="overlay"><img src="/tn_WhiskersPrinceworkup.png"></span>
        <span id="station_B" class="overlay">Highlight image here.</span>

    </div>

    <p>
        <h2>Choose a Shirt</h2>
        <form>
            <input type="checkbox" name="image" value="station_A">Station Alfa<br>
            <input type="checkbox" name="image" value="station_B">Station Beta
            <input type="checkbox" name="image" value="bandanna" id="checkbox1">Bandanna
        </form>
    </p>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
    $("input[type='checkbox']").change(function() {
    var state = $(this).val();
    //
    $("#"+state).toggleClass("overlay");
}); 
     $(document).ready(function(){
    $('#checkbox1').change(function(){
        if(this.checked)
            $('#map').fadeIn('slow');
        else
            $('#map').fadeOut('slow');

    });
});
  </script>
</body></html>

小提琴在這里

UPDATE：更新的小提琴在此處添加了圖像網址。 同樣，div地圖應該淡入和淡出，由於某種原因，它在小提琴中不起作用。 在我的devbox上工作正常。

Answer 1

請嘗試這個。

$(document).ready(function () {
    $("input[type='checkbox']").change(function () {
        var state = $(this).val();
        $("#" + state).toggleClass("overlay");
    });
    $('#checkbox1').change(function () {
        if (this.checked) $('#map').fadeIn('slow');
        else $('#map').fadeOut('slow');

    });
});

演示

如何使div框淡入和淡出div

問題描述

1 個解決方案

解決方案1
0 已采納 2015-07-20 03:41:05

如何使div框淡入和淡出div

問題描述

1 個解決方案

解決方案1 0 已采納 2015-07-20 03:41:05

解決方案1
0 已采納 2015-07-20 03:41:05