格動畫不能正常工作的jQuery

HTML格動畫不能正常工作的jQuery

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="mystyle1.css"> 
    <title>hd images</title> 
</head> 

<body> 
    <div id="top1"> 
    <div class="inside1"> 
     <div class="nested_inside1"> MY HAPPY PLACES </div> 
    </div> 
    <div class="inside2"> 
     <div class="nested_inside2"> CLUMSSY BEACHES 
     </div> 
    </div> 
    <div class="inside3"> 
     <div class="nested_inside3"> REGULAR APPLES </div> 
    </div> 
    <div class="inside4"> 
     <div class="nested_inside4"> LUSTY BRUSHES </div> 
    </div> 
    <div class="inside5"> 
     <div class="nested_inside5"> ECSTATIC DIMENSIONS </div> 
    </div> 
    <div class="inside6"> 
     <div class="nested_inside6"> CURLY HILLS </div> 
    </div> 
    <div class="inside7"> 
     <div class="nested_inside7"> SHINY WATER </div> 
    </div> 
    <div class="inside8"> 
     <div class="nested_inside8"> COOL BOATS </div> 
    </div> 
    <div class="inside9"> 
     <div class="nested_inside9"> CRUNCHY CLUSHTERS </div> 
    </div> 
    <script type="text/javascript" src="myscript2.js"></script> 
</body> 

</html>

的JavaScript

$(document).ready(function() { 
    $("#top1").on("hover", ".nested_inside", function() { 
    $(this).animate({ 
     "top": "-10px" 
    }); 
    }); 
});

來源

2017-07-08 Ayush Sharma

，因爲你不」有一類nested_inside但nested_inside1，ensted_inside2這可不行......等等上...你必須刪除號碼

適應它裏柯本作每一項：

<div class="inside7"> 
    <div class="nested_inside"> SHINY WATER </div> 
</div>

，你還需要inlcude的jQuery在你的腦袋：

<script src="path/to/jquery.js"></script>

適應你的代碼是這樣的：

$(document).ready(function() { 
    $("#top1").on("mouseover", ".nested_inside", function() { 
    $(this).animate({ 
    "top": "-10px" 
    }); 
    }); 
});

和你的CSS像這樣的：

.nested_inside { 
    position: relative; 
}

工作小提琴：https://jsfiddle.net/jnb7p14o/2/

來源

2017-07-08 15:20:55

其實我刪除它，並把它改爲nested_inside但它仍然不工作 –

我已經包含鏈接仍然無效 –

更新了我的答案，這應該適合您。請點擊upvote，並檢查我的答案，如果它解決了您的問題;-) –

<head> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
</script> 
<script type="text/javascript" src="myscript2.js"></script> 
<link rel="stylesheet" type="text/css" href="mystyle1.css"> 
<title>hd images</title> 
</head>

您需要將鏈接添加到jQuery的文件在您<head>那之後添加的jQuery文件。

來源

2017-07-08 15:25:43

我已經包含鏈接仍然不工作 –

有兩個固有的問題與此：

的CSS - 添加位置：相對於.nested_inside以確保top物業工作
懸停事件已經從jQuery 1.8刪除。你需要用mouseenter和mouseleave來取代它，並做必要的動畫，如果你使用

我根據我的應該是如何工作的設想增添了小提琴的jQuery的最新版本： https://jsfiddle.net/fxmtz2yn/

$(document).ready(function() { 

$("#top1").on("mouseover mouseleave", ".nested_inside",function(evt) { 
    var $el = $(this), 
     top = $el; 
    switch(evt.type) { 
     case "mouseover": 
      $el.animate({ 
       "top": "-10px" 
      }); 
      break; 
     case "mouseleave": 
      $el.animate({ 
       "top": "0" 
      }); 
      break; 
    } 
    }); 
});

來源

2017-07-08 15:47:55

其實文件沒有得到工作..i試圖在它之間插入一個警報，但警報不顯示出來....像這樣 $（document）.ready（function（）{ alert（「hello」）; ....... 。 ... }）; 我有一個附加的JavaScript文件，但它正常工作 –

$(".nested_inside").hover(function(){ 
    $(this).animate({"top": "-10px"}); 
},function(){ 
$(this).animate({"top":"initial"}); 
})

懸停（）需要一個回調

來源

2017-07-08 15:59:19 Kirino

實際上文件沒有得到工作..我試圖插入一個警報，但警報不顯示了....像這樣 $（document） .ready（function（）{ alert（「hello」）; ....... ..... }）; 我有一個附加的JavaScript文件，但它;正常工作 –

格動畫不能正常工作的jQuery

回答

相關問題