-2

我希望点击箭头发光图像时，apDiv1被隐藏，横幅在页面上从右向左滑动。我应该添加哪些库以及添加jqueryui库说“jquery未定义”？我是很新的jQuery，请与提供帮助，让我知道在我的代码的变化... 由于事先我想滑动div id =“banner”？

http://jsfiddle.net/UVZw2/

html{ 
    height: 100%; 
} 
body { 
    margin:0; 
    padding:0; 
    background-color:Silver; 
} 

#apDiv1 { 
    position: absolute; 
    width: 800px; 
    z-index: 1; 
    padding: 0; 
    display:block; 
    color:#FFF; 
    left: 0px; 
} 
#apDiv2 { 
    min-width: 800px; 
    width: 100%; 
    position: absolute; 
    visibility: visible; 
    padding: 0; 
} 
#fontmain { 
    font-size:250px; 
    margin-left:400px; 
    padding: 0; 
} 
#fonttag { 
    font-size:30px; 
    margin-left:480px; 
    padding: 0; 
} 

#apDiv3 { 
    margin-top:260px; 
    font-size:90%; 
    margin-left:500px; 
} 
#apDiv4 { 
    margin-top:250px; 
    margin-left:1080px; 
} 

#banner { 
    margin-top:100px; 
    margin-left:175px; 
    background-color:Transparent; 
    display:none; 
    z-index:1; 
    position:relative; 
} 
#bannerbg { 
    width:930px; 
    height:380px; 
    margin-top:10px; 
    margin-right:10px; 
    display:block; 
    background-color:Teal; 
    z-index:-1; 
    position:absolute; 
} 
#left { 
    z-index:3; 
    margin-left:9px; 
    margin-top:280px; 
    position:absolute; 
} 
#right { 
    z-index:3; 
    position:absolute; 
    margin-top:280px; 
    margin-left:819px 
} 
#bot { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 

<script> 
    $(document).ready(function(){ 
     $("#apDiv4").click(function(){ 
     $("#apDiv1").hide(); 
     // Set the effect type 
     var effect = 'slide'; 

     // Set the options for the effect type chosen 
     var options = { direction: 'left' }; 

     // Set the duration (default: 400 milliseconds) 
     var duration = 900; 
     $("#banner").show("slide") 
    }); 
}); 


    // function vb() 
    //{ 
    //document.getElementById("apDiv1").style.display="none"; 
    //document.getElementById("banner").style.display="block"; 
    //} 
</script> 
<link rel="stylesheet" href="frontpage.css"> 
</head> 
<body> 
    <form> 
     <div id="apDiv1"> 
      <div id="apDiv2"> 
       <div id="fontmain">xyzef</div> 
       <div id="fonttag">kljjhfghjkk</div> 
       <div id="apDiv3">Copyright © 2014 ___________.All rights reserved.</div> 
      </div> 
      <div id="apDiv4"> 
       <img src="icons/next-arrow-glow.png" width="200" height="200"> 
      </div> 
     </div> 
     <div id="banner"><img id="bot"src="icons/dark_slider_frame.png"/> 
      <img id="left" alt="previous" src="icons/left.png"/> 
      <img id="right" alt="next" src="icons/right.png"/> 
      <div id="bannerbg"></div> 
     </div> 
    </form> 
</body> 
</html>

来源

2014-01-20 aks007

必须包括jQuery的作为一个单独的脚本，然后才能使用它的方法。 – Blazemonger

在问这样的问题之前，你应该总是谷歌错误。谷歌：“jquery未定义”。你可能会在你的第一击中得到一个堆栈溢出的答案。 – RGB

如果它说“'jQuery'未定义”，那么它会非常令人惊讶，因为您在上面的任何地方都没有引用符号“jQuery”。（现在，如果它说“'$'未定义”，那将是不同的......） –

编辑

检查更新Fiddle example

我刚刚添加位置.banner选择器并将jQuery更改为：

$(document).ready(function(){ 
     $("#apDiv4").click(function(){ 
     $("#apDiv1").hide(); 
     $("#banner").show().animate({'right': '0'},900); 
    }); 
});

完整的CSS更新的灵活性

html{ 
height: 100%; 

} 
html, body { 
    margin:0; 
    padding:0; 
    background-color:Silver; width:100%; height:100% 
} 
.container{ max-width:80%; width:80%; height:800px; position:relative; margin:0px auto; overflow-x:hidden;} 
#apDiv1 { 
    position: relative; 
    width: 80%; 
    z-index: 1; 
    padding: 0; 
    display:block; 
    color:#FFF; 
    margin:0px auto; 

} 
#apDiv2 { 
    min-width: 800px; 
    width: 100%; 
    position: relative; 
    visibility: visible; 
    padding: 0; 
} 
#fontmain { 
    font-size:250px; 
    margin:0px auto; 
    padding: 0; 
} 
#fonttag { 
    font-size:30px; 
    padding: 0; 
} 

#apDiv3 { 
    margin-top:260px; 
    font-size:90%; 
    margin:0px auto; 
} 
#apDiv4 { 
    margin-top:250px; 
    float:left; margin:0 30px 0 0; 
} 

#banner { 
    margin-top:100px; 
    margin-left:0; 
    width:100%!important; 
    background-color:Transparent; 
    display:none; 
    z-index:1; 
    position:relative; 
    right:-100%;  
} 
#bannerbg { 
    width:100%; 
    height:380px; 
    margin-top:10px; 
    margin-right:10px; 
    display:block; 
    background-color:Teal; 
    z-index:-1; 
    position:relative; 

} 
#left { 
    z-index:3; 
    left:28px; 
    position:absolute; 
    bottom:50%; 
} 
#right { 
    z-index:3; 
    position:absolute; 
    margin-top:280px; 
    right:20px; 
    bottom:50%; 
} 
#bot { 
    position:absolute; 
    top:0px; 
    left:0px; 
}

新增集装箱周围的动画DIV

<div class="container"> 
    <div id="banner"><img id="bot"src="icons/dark_slider_frame.png"/> 
     <img id="left" alt="previous" src="icons/left.png"/> 
     <img id="right" alt="next" src="icons/right.png"/> 
     <div id="bannerbg"></div> 
    </div> 
</div>

来源

2014-01-20 17:36:29 hsobhy

但横幅仍然没有滑动的点击事件。 – aks007

我注意到与图像的链接没有关闭标签，所以我在右侧插入了一个链接（aa）。点击它，横幅将滑动。让我知道你想点击什么对象来为横幅设置动画。 – hsobhy

$（“#banner”）.show（）。animate（ {“left”：“ - = 1860px”}， “slow”）;代替right我左转：-1860 – aks007

我想滑动div id =“banner”？

回答

编辑

完整的CSS更新的灵活性

新增集装箱周围的动画DIV

相关问题