使用javascript淡入和淡出

Fade in and out using javascript

本文关键字：淡出 淡入 javascript 使用      更新时间：2023-09-26

我有一个选择器，可以让我在三种类型的笔记本电脑之间进行选择。然而，当选择一个品牌的笔记本电脑时，该品牌的3种类型必须以单选按钮的形式出现。我试图使一个javascript淡出/退出。因此，如果我选择东芝，东芝的类型淡入，如果我选择另一个品牌，当前显示的品牌淡入，另一个。我尝试了一个js淡出/退出功能，但我不确定如何改变它的淡出/退出几个元素。请帮忙好吗?

<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="custom.css">
</HEAD>
<body>
    <div id="laptop">
        <form>
            <select>
              <option id="handle" value="toshibalap" selected>toshiba</option>
              <option id="handle" value="acerlap">acer</option>
              <option id="handle" value="hplap">hp</option>
            </select> 
                <div id="slideSource">
                    <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
                    <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
                    <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
                </div>
                <div id="acer">
                    <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
                    <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
                    <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
                </div>
                <div id="hp">
                    <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
                    <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
                    <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
                </div>
        </form>
     </div>
<script>
var slideSource = document.getElementById('slideSource');
document.getElementById('handle').onclick = function(){
    slideSource.className = slideSource.className ? '' : 'fade';
}
</script>
</body>

</HTML>
CSS: 

div#slideSource {
opacity:1;
transition: opacity 1s; 
}
div#slideSource.fade {
opacity:0;
}

如果你不想使用JQuery，你可以使用onChange事件在每次值被改变时分配一个函数回调。然后，element.style.display = "none"或element.style.display = "block"来显示或隐藏每个元素。

这是我的JsFiddle。为select标签添加一个Id。

HTML: 

<div id="laptop">
<form>
    <select id="select">
        <option id="handle" value="toshibalap" selected>toshiba</option>
        <option id="volvocar" value="acerlap">acer</option>
        <option id="saabcar" value="hplap">hp</option>
    </select> 
    <div id="toshiba">
        <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
        <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
        <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
    </div>
    <div id="acer">
        <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
        <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
        <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
    </div>
    <div id="hp">
        <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
        <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
        <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
    </div>
</form>

JS: 

var select = document.getElementById("select");
document.getElementById("toshiba").style.display = "block"; //initialized the selected option as "display = block";
select.addEventListener("change", function(event) {
    if(event.target.value == "toshibalap") {
        document.getElementById("toshiba").style.display = "block";
        document.getElementById("acer").style.display = "none";
        document.getElementById("hp").style.display = "none";
    }
    else if(event.target.value == "acerlap") {
        document.getElementById("toshiba").style.display = "none";
        document.getElementById("acer").style.display = "block";
        document.getElementById("hp").style.display = "none";
    }
    else if(event.target.value == "hplap") {
        document.getElementById("toshiba").style.display = "none";
        document.getElementById("acer").style.display = "none";
        document.getElementById("hp").style.display = "block";
    }
});
CSS: 

#toshiba {
    display: none;
}
#acer {
    display: none;
}
#hp {
    display: none;
}

我同意第一个评论，jQuery会更容易。

HTML 

<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="custom.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</HEAD>
<body>
<div id="laptop">
    <form>
        <select>
          <option id="handle" value="toshibalap" selected>toshiba</option>
          <option id="volvocar" value="acerlap">acer</option>
          <option id="saabcar" value="hplap">hp</option>
        </select> 
            <div id="toshibalap" class="laptops">
                <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
                <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
                <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
            </div>
            <div id="acerlap" class="laptops">
                <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
                <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
                <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
            </div>
            <div id="hplap" class="laptops">
                <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
                <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
                <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
            </div>
    </form>
 </div>
</body>

</HTML>
jQuery 

jQuery('select').change(function(){
   var val = jQuery(this).val();
   jQuery('.laptops').not('#'+val).fadeOut();
   jQuery('#'+val).fadeIn();
});

希望有帮助!我确实修改了你的HTML。向笔记本电脑容器添加了一个类，并将笔记本电脑容器的div ID与选择框的值相匹配。

如果你想保持渐入渐出，你可以这样做:

更新HTML: 

<div id="laptop">
        <form>
            <select id="sel">
                <option  selected>Select</option>
              <option id="handle" value="toshibalap">toshiba</option>
              <option id="volvocar" value="acerlap">acer</option>
              <option id="saabcar" value="hplap">hp</option>
            </select> 
                <div id="slideSource">
                    <div id="toshiba">
                    <strong>toshiba 1<input type="radio" name="toshiba1" value="toshiba1" checked></strong>
                    <strong>toshiba 2<input type="radio" name="toshiba2" value="toshiba2"></strong>
                    <strong>toshiba 3<input type="radio" name="toshiba3" value="toshiba3"></strong>
                        </div>
                <div id="acer">
                    <strong>acer 1<input type="radio" name="acer1" value="acer1" checked></strong>
                    <strong>acer 2<input type="radio" name="acer2" value="acer2"></strong>
                    <strong>acer 3<input type="radio" name="acer3" value="acer3"></strong>
                </div>
                <div id="hp">
                    <strong>hp 1<input type="radio" name="hp1" value="hp1" checked></strong>
                    <strong>hp 2<input type="radio" name="hp2" value="hp2"></strong>
                    <strong>hp 3<input type="radio" name="hp3" value="hp3"></strong>
                </div>
 </div>
        </form>
     </div>

稍微更新的CSS:

#slideSource {
    position:relative;
}
#toshiba, #acer, #hp {
opacity:0;
    position:absolute;
}
#toshiba.fadeout, #acer.fadeout, #hp.fadeout {
opacity:0;
transition: opacity 1s; 
}
#toshiba.fadein, #acer.fadein, #hp.fadein {
    opacity:1;
    transition: opacity 1s;
}

和JS: 

document.getElementById('sel').onchange = function(){
var slideSource = document.getElementById('slideSource');  
    target=this.value.replace('lap','');

    divs=slideSource.getElementsByTagName('div');
   for(i=0;i<divs.length;i++) {
       if(divs[i].id!=target) {
          divs[i].className =  'fadeout';
       }
       else {
           divs[i].className =  'fadein';
       }
   }
}

演示http://jsfiddle.net/3qfgyzrz/>

相关文章：