格动画不能正常工作的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

回答

相关问题