jQuery的意外行爲被隱藏並滑落

我使用jQuery來幻燈片和隱藏文本。與CSS代碼波紋管隱藏文本，jQuery的意外行爲被隱藏並滑落

.mainContent>.imageInfo:nth-child(1){ 
    display:none; 
} 
.mainContent>.imageInfo:nth-child(2) 
{ 
    display:none; 
} 
.mainContent>.imageInfo:nth-child(3){ 
    display:none; 
} 
.mainContent>.imageInfo:nth-child(4){ 
    display:none; 
}

和項目盤旋是爲了顯示該項目的左下方角文本塊。

$(".colContainer > .mainContent:nth-child(n)").hover(function() { 
     var $sel=$(".mainContent>.imageInfo:nth-child(" +($(this).index() + 1)+")"); 


     if ($sel.is(":hidden")) { 
      $sel.slideDown("slow");console.log("hid"); 
     } else { 
      $sel.hide();console.log("show"); 
     } 
});

但是，爲gif表演，什麼都沒有發生，當我將鼠標懸停在第一個2個元素，當我將鼠標懸停在第三個元素，它應該展現自己的文字;它顯示了所有左下角的文本塊。

代碼， https://jsfiddle.net/Debra321/j9kkx4no/127/

任何意見，歡迎和讚賞。

*我確認它不是由像打字錯誤這樣的小錯誤引起的。

我的觀察是，有2個問題：一個是$ sel.hide被誤稱爲儘管該項目已經隱藏了。二是以某種方式顯示每個文本塊的第三個項目選擇器。懸停時，console.log輸出消息。

來源

2017-03-07 Yu Fang

這可以用CSS來 – Pankaj

這是最簡單的CSS做，如下面的代碼解釋。

雖然對於移動網站/應用程序;懸停不是一個很好的互動，因爲你不能在手機上懸停。

它不在jQuery中工作，因爲在行var $sel = $(".mainContent>.imageInfo:nth-child(" + ($(this).index() + 1) + ")");; nth-child選擇器應該在.mainContent而不是.imageInfo。

.imageInfo永遠是第三個孩子的.mainContnet裏面，這就是爲什麼它被hsowing只有當你將鼠標懸停在第3瓦（index是2和nth-child是index+1，即3）。

所以可以寫爲var $sel = $(".mainContent:nth-child(" + ($(this).index() + 1) + ")>.imageInfo");

(function() { 
 
    var dataObj = 
 
    `{ 
 
     "widget": { 
 
      "story": { 
 
       "subtitle": "My", 
 
       "maintitle": "Story", 
 
       "desc": "A life as a daughter, sister and programer.", 
 
       "image": "http://gdurl.com/USQR", 
 
       "imageinfo":"Hsinchu", 
 
       "spriteiconpos":"0 0", 
 
       "url": "#" 
 
      }, 
 
     "work": { 
 
      "subtitle": "Working", 
 
      "maintitle": "Experience", 
 
      "desc": "Learning, Studying and Training.", 
 
      "image": "http://gdurl.com/USQR", 
 
      "imageinfo":"San Francisco", 
 
      "spriteiconpos":"-80px 0", 
 
      "url": "#" 
 
     }, 
 
     "interests": { 
 
      "subtitle": "Personal", 
 
      "maintitle": "Interests", 
 
      "desc": "Paint life with colors of interests.", 
 
      "image": "http://gdurl.com/USQR", 
 
      "imageinfo":"Quebec", 
 
      "spriteiconpos":"0 -80px", 
 
      "url": "#" 
 
     }, 
 
     "goals": { 
 
      "subtitle":"Future", 
 
      "maintitle":"Goals", 
 
      "desc": "Do not just survive.", 
 
      "image": "http://gdurl.com/USQR", 
 
      "imageinfo":"Quebec", 
 
      "spriteiconpos":"-80px -80px", 
 
      "url": "#" 
 
     } 
 
     } 
 
    }`; 
 
    var dataObj = $.parseJSON(dataObj); 
 
    var dataArray = $.map(dataObj["widget"], function(value, index) { 
 
    return [value]; 
 
    }); 
 
    var htmlCode = ""; 
 
    for (var i in dataArray) { 
 
    var cssAttr = ""; 
 
    var cssSelect = ""; 
 
    //html 
 
    htmlCode += "<div class='mainContent'>"; 
 
    htmlCode += "<div class='mainCol'>"; 
 
    htmlCode += "<h2>" + dataArray[i].subtitle + "</h2>"; 
 
    htmlCode += "<h1>" + dataArray[i].maintitle + "</h1>"; 
 
    htmlCode += "<p>" + dataArray[i].desc + "</p>"; 
 
    htmlCode += "</div>"; 
 
    htmlCode += "<i class='i-caretRight'></i>"; 
 
    htmlCode += "<div class='imageInfo'>" + dataArray[i].imageinfo + "</div>"; 
 
    htmlCode += "</div>"; 
 
    //css 
 
    cssAttr = "background: url(http://gdurl.com/USQR) " + dataArray[i].spriteiconpos + " no-repeat"; 
 
    cssSelect = ".colContainer > .mainContent:nth-child(" + (parseInt(i) + 1) + "):before"; 
 
    var sheet = document.styleSheets[0]; 
 
    var rules = sheet.rules; 
 
    document.styleSheets[0].addRule(cssSelect, cssAttr, rules.length); 
 

 

 
    } 
 
    $("#phoneContent .colContainer").html(htmlCode); 
 
})();

@import url('https://fonts.googleapis.com/css?family=Allura|Habibi|Asar'); 
 
html { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background: #fcfca4; 
 
    background: linear-gradient(to top right, #F3E9D2, #EC9192); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    position: relative; 
 
} 
 

 
#phoneContent { 
 
    position: absolute; 
 
    top: 17.7%; 
 
    left: 50px; 
 
    width: 253px; 
 
    height: 455px; 
 
    display: block; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 

 
#mainPhoneContent { 
 
    top: 0; 
 
    height: 90%; 
 
    position: relative; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; 
 
    background: #c7c4be url(http://gdurl.com/ist4) repeat; 
 
} 
 

 
.phoneToolBar { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 10%; 
 
    left: 0; 
 
    background: black; 
 
} 
 

 
#phoneContent .colContainer { 
 
    width: 100%; 
 
    height: 110%; 
 
    display: flex; 
 
    top: 15%; 
 
    flex-direction: column; 
 
    position: absolute; 
 
    background: white; 
 
    -webkit-box-shadow: 4px 7px 50px 21px rgba(0, 0, 0, 0.41); 
 
    -moz-box-shadow: 4px 7px 50px 21px rgba(0, 0, 0, 0.41); 
 
    box-shadow: 4px 7px 50px 21px rgba(0, 0, 0, 0.41); 
 
} 
 

 
.colContainer>.mainContent { 
 
    flex: 1; 
 
    position: relative; 
 
    background: #f1efe4; 
 
    overflow: hidden; 
 
    background: linear-gradient(to bottom, #f0f0e5, #e7e5da); 
 
} 
 

 
.mainContent>.imageInfo { 
 
    position: absolute; 
 
    left: 1%; 
 
    bottom: -100%; 
 
    width: 35%; 
 
    height: 23%; 
 
    text-align: center; 
 
    font-family: Allura, serif; 
 
    font-size: 1rem; 
 
    color: black; 
 
    transition: bottom linear 0.2s; 
 
} 
 

 
.mainContent:hover>.imageInfo { 
 
    bottom: 1%; 
 
} 
 

 
.mainContent>.mainCol { 
 
    left: 40%; 
 
    width: 50%; 
 
    height: 100%; 
 
    position: absolute; 
 
} 
 

 
.mainCol>h2 { 
 
    font-family: 'Habibi', serif; 
 
    color: #ff7519; 
 
    font-size: 1rem; 
 
} 
 

 
.mainCol>h1 { 
 
    font-family: 'Habibi', serif; 
 
    color: black; 
 
    font-size: 1.5rem; 
 
    margin-top: -12%; 
 
} 
 

 
.mainCol>p { 
 
    margin-top: -10%; 
 
    font-family: Georgia, serif; 
 
    font-size: 0.7rem; 
 
    font-style: italic; 
 
    line-height: 1.45; 
 
    color: #383838; 
 
} 
 

 
.colContainer>.mainContent:nth-child(n) { 
 
    position: relative; 
 
} 
 

 
.colContainer>.mainContent:nth-child(n):hover { 
 
    background: #ffffff; 
 
    cursor: pointer; 
 
} 
 

 
.colContainer>.mainContent:nth-child(n):before { 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 2%; 
 
    content: ""; 
 
    float: left; 
 
    width: 80px; 
 
    height: 80px; 
 
} 
 

 
.mainContent>i { 
 
    position: absolute; 
 
    content: ""; 
 
    right: 3%; 
 
    top: 40%; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 

 
.mainContent>i:before { 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    height: 2px; 
 
    background: #b8b7b0; 
 
    content: ""; 
 
    transform-origin: right top; 
 
    -ms-transform-origin: right top; 
 
    /* IE 9 */ 
 
    -webkit-transform-origin: right top; 
 
    /* Safari and Chrome */ 
 
    -moz-transform-origin: right top; 
 
    /* Firefox */ 
 
    -o-transform-origin: right top; 
 
    /* Opera */ 
 
    transform: rotate(-45deg); 
 
} 
 

 
.mainContent>i:after { 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    height: 2px; 
 
    background: #b8b7b0; 
 
    content: ""; 
 
    transform-origin: right bottom; 
 
    -ms-transform-origin: right bottom; 
 
    /* IE 9 */ 
 
    -webkit-transform-origin: right bottom; 
 
    /* Safari and Chrome */ 
 
    -moz-transform-origin: right bottom; 
 
    /* Firefox */ 
 
    -o-transform-origin: right bottom; 
 
    /* Opera */ 
 
    transform: rotate(45deg); 
 
} 
 

 
.st0 { 
 
    fill: none; 
 
    stroke: #FFFFFF; 
 
    stroke-miterlimit: 10; 
 
} 
 

 
.st1 { 
 
    fill: none; 
 
    stroke: #DBDDDD; 
 
    stroke-miterlimit: 10; 
 
} 
 

 
.st2 { 
 
    fill: #FFFFFF; 
 
} 
 

 
.st3 { 
 
    fill: none; 
 
    stroke: #E5E5E5; 
 
    stroke-miterlimit: 10; 
 
} 
 

 
.st4 { 
 
    opacity: 0.3; 
 
    fill: none; 
 
    stroke: #FFFFFF; 
 
    stroke-miterlimit: 10; 
 
} 
 

 
#myPhone { 
 
    position: relative; 
 
    width: 350px; 
 
    height: 700px; 
 
    display: block; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="myPhone"> 
 
    <div id="phonediv"> 
 
     <svg version="1.1" id="phone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 500" style="enable-background:new 0 0 250 500;" xml:space="preserve"> 
 
    <g> 
 
\t  <path class="st0" d="M21,104.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0 
 
\t \t c1.4,0,2.5,1.1,2.5,2.5V104.5z"/> 
 
     \t <path class="st0" d="M21,143.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0 
 
\t \t c1.4,0,2.5,1.1,2.5,2.5V143.5z"/> 
 
\t  <path class="st0" d="M21,182.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0 
 
\t \t c1.4,0,2.5,1.1,2.5,2.5V182.5z"/> 
 
    </g> 
 
    <path class="st0" d="M200.5,23.3H53.7c-22.6,0-35.1,15.2-35.1,34.4v387.9c0,21.4,16.6,35.1,35.1,35.1h146.8 
 
\t c19.7,0,34.4-15.9,34.4-35.1V57.7C234.9,38.5,221.9,23.3,200.5,23.3z M217.6,414.6H35.1V87.2h182.5V414.6z"/> 
 
    <path class="st0" d="M200.5,476.2H53.7c-14.7,0-30.6-11.7-30.6-30.6V57.7c0-17,13.2-29.9,30.6-29.9h146.8 
 
\t c16.7,0,29.9,13.1,29.9,29.9v387.9C230.4,461.6,216.1,476.2,200.5,476.2z M53.7,28.6c-17,0-29.9,12.5-29.9,29.1v387.9 
 
\t c0,20.4,17.8,29.9,29.9,29.9h146.8c15.2,0,29.1-14.2,29.1-29.9V57.7c0-16.3-12.8-29.1-29.1-29.1H53.7z"/> 
 
    <circle class="st1" cx="127.1" cy="445.2" r="19.9"/> 
 
     <g> 
 
     \t <path class="st2" d="M127.1,427.1c10.4,0,18.9,8.5,18.9,18.9c0,10.4-8.5,18.9-18.9,18.9c-10.4,0-18.9-8.5-18.9-18.9 
 
\t \t C108.2,435.6,116.7,427.1,127.1,427.1 M127.1,426.1c-11,0-19.9,8.9-19.9,19.9c0,11,8.9,19.9,19.9,19.9c11,0,19.9-8.9,19.9-19.9 
 
\t \t C147,435,138.1,426.1,127.1,426.1L127.1,426.1z"/> 
 
     </g> 
 
     <path class="st3" d="M131.2,453.6h-9c-1.7,0-3-1.4-3-3v-9c0-1.7,1.4-3,3-3h9c1.7,0,3,1.4,3,3v9C134.2,452.3,132.9,453.6,131.2,453.6 
 
\t z M122.2,439.4c-1.2,0-2.3,1-2.3,2.3v9c0,1.2,1,2.3,2.3,2.3h9c1.2,0,2.3-1,2.3-2.3v-9c0-1.2-1-2.3-2.3-2.3H122.2z"/> 
 
     <path class="st0" d="M146,50.5c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5l0,0c0-1.4,1.1-2.5,2.5-2.5h35 
 
\t C144.9,48,146,49.1,146,50.5L146,50.5z"/> 
 
     <line class="st4" x1="34.5" y1="87" x2="217" y2="87"/> 
 
     </svg> 
 
    </div> 
 
    <div id="phoneContent"> 
 
     <div id="mainPhoneContent"> 
 
     <div class="colContainer"> 
 
     </div> 
 
     <!--colContainer--> 
 
     </div> 
 
     <div class="phoneToolBar"></div> 
 
    </div> 
 
    <!--phoneContent--> 
 
    </div> 
 
</body>

來源

2017-03-07 10:50:43 Pankaj

容易得多做，謝謝！我看到使用轉換。但仍然存在一些問題：一是當鼠標滾動到底部時，最後一個項目的文本塊是可見的;二是我不知道爲什麼當我用鼠標對一個項目進行對焦時，組件會抖動。請看我的附件。 –

您可以檢查它現在 – Pankaj

非常感謝你。它看起來很好，你知道爲什麼jQuery版本不工作嗎？我好奇。 –

jQuery的意外行爲被隱藏並滑落

回答

相關問題