Question

当您将鼠标悬停在它们上时，我正在尝试为网页中浅蓝色点的框阴影设置动画。我想使用$（this）选择器，并且只希望$（this）选择器中的“ .dotIcon”类受悬停事件影响。换句话说，当您将鼠标悬停在页面中的Link1上时，我希望Link1左侧的单个白点跳动。但是我不想使用任何ID来创建此动画，我只想使用类。为什么没有选择$（this）选择器的“ .dotIcon”子代的原因？

如果我不使用$（this）选择器，但我想使用$（this），则能够解决此问题

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--this version works with IE-->
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator -->
<script type="text/javascript" src="https://bitstorm.org/jquery/shadow-animation/jquery.animate-shadow-min.js"></script> <!-- shadow box animator -->


<script>


$(document).ready(function(){

/*fade in and flashing dots upon page load*/

    $("#DotItem1").delay(200).animate({'opacity': '1'}, 1000); 
    $("#DotItem2").delay(300).animate({'opacity': '1'}, 1000); 
    $("#DotItem3").delay(400).animate({'opacity': '1'}, 1000); 

    $("#dotIcon1").delay(1000).animate({'background-color': 'white','opacity':'1'}, 500).animate({'background-color': '#ADDBFF','opacity':'.7'}, 500).animate({'background-color': 'white','opacity':'1'}, 500).animate({'background-color': '#ADDBFF'}, 500); 
    $("#dotIcon2").delay(1100).animate({'background-color': 'white','opacity':'1'}, 500).animate({'background-color': '#ADDBFF','opacity':'.7'}, 500).animate({'background-color': 'white','opacity':'1'}, 500).animate({'background-color': '#ADDBFF'}, 500); 
    $("#dotIcon3").delay(1200).animate({'background-color': 'white','opacity':'1'}, 500).animate({'background-color': '#ADDBFF','opacity':'.7'}, 500).animate({'background-color': 'white','opacity':'1'}, 500).animate({'background-color': '#ADDBFF'}, 500); 


    var initList;

    $('.DotItemContainer').mouseover(function(){
    if (initList) clearInterval(initList);
    initList = setInterval(function dotColorChange(){
        $(this).find(".dotIcon").animate({'background-color': '#ADDBFF','boxShadow':'0 0 10px 1px #FFFFFF'}); 
        $(this).find(".dotIcon").animate({'background-color': 'white','boxShadow':'0 0 12px 4px #FFFFFF'})
    },100); 
    }).mouseout(function(){
    clearInterval(initList);
        $(this).find(".dotIcon").animate({'background-color': '#ADDBFF','boxShadow':'0 0 10px 1px #FFFFFF'}).finish();
    });


});

</script>

<style>

img{border: none;}


#main_item_list{
    list-style-type: none; 
    position: absolute; 
    top: 190px; 
    padding-left: 0px;
}

#main_item_list a { 
    text-decoration: none;
}   

.DotItemContainer{margin-bottom: 20px;}


.opaqueBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    margin-left: 39px; 
    width: 360px; 
    height: 46px; 
    background-color: rgba(72, 97, 115, 0.6);
    border-radius: 10px;
    display: inline-block;
}

.opaqueBlock:hover{
    background-color: rgba(72, 97, 115, 0.8);
}

.opaqueBlockSubBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    margin-left: 60px; 
    width: 220px; 
    height: 36px; 
    background-color: rgba(72, 97, 115, 0.6);
    border-radius: 10px;
}

.opaqueBlockSubBlock:hover{
    background-color: rgba(72, 97, 115, 0.8);
}


.formTextSpan{
    position: absolute; 
    z-index: 1; 
    margin-left: 23px; 
    color: white; 
    margin-top: 7px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 23px !important;
}

.formTextSpanSubItem{
    position: absolute; 
    z-index: 1; margin-left: 22px; 
    color: white; 
    margin-top: 5px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 20px !important;
    display: none;
}

.dotIcon{
    height: 30px;
    width: 30px;
    background-color: #ADDBFF;
    position: absolute; 
    margin-left:13px;
    margin-top: 7px;
    border-radius: 15px;
    opacity: .7;  /*started off slightly transparent so that it fades in*/
    box-shadow: 0 0 10px 1px white;
}

.dotLine{
    position: relative;
    left: 43px;
    top: -18px;
    stroke: white;
}

#DotItem1{opacity: 0;}
#DotItem2{opacity: 0;}
#DotItem3{opacity: 0;}

</style>

<link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"/>


<div id="TechBackgroundContainer" style="background-color: navy; height: 1000px;">


<ul id="main_item_list">



    <li id="DotItem1" class="DotItemContainer">
        <a href="#" target="_blank" >
        <div class="dotIcon" id="dotIcon1"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Link1</span></div>
        </a>    
    </li>

    <li id="DotItem2" class="DotItemContainer"> 
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon2"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Link2</span></div>
        </a>
    </li>

    <li id="DotItem3" class="DotItemContainer"> 
        <a href="#" target="_blank">
        <div class="dotIcon" id="dotIcon3"></div>
        <svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="17" y2="0"/></svg>
        <div class="opaqueBlock" style=""><span class="formTextSpan">Link3</span></div>
        </a>
    </li>

</ul>


</div>
</div>

Answer 1

null的上下文已更改并且指向窗口。您可以分配上下文并像这样使用它

$(this)

当孩子是一个班级时，如何访问$（this）选择器的孩子？

1 个答案: