Fatal编程技术网
  • jquery/
  • Jquery 如何调整div的大小并将其移动或滑动到隐藏div？

Jquery 如何调整div的大小并将其移动或滑动到隐藏div？

jquery html

Jquery 如何调整div的大小并将其移动或滑动到隐藏div？,jquery,html,jquery-animate,move,Jquery,Html,Jquery Animate,Move,我有一个布局设置与我的链接作为其中4个320x320px的图像。悬停时它们的不透明度会发生变化。我现在要做的是，如果可能的话，单击框将扩展到一个预先确定的大小，并添加新内容。如果没有，则导航到具有新内容的同一页面上的隐藏div。希望这是有意义的 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href=

我有一个布局设置与我的链接作为其中4个320x320px的图像。悬停时它们的不透明度会发生变化。我现在要做的是，如果可能的话，单击框将扩展到一个预先确定的大小，并添加新内容。如果没有，则导航到具有新内容的同一页面上的隐藏div。希望这是有意义的

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/styles.css" rel="stylesheet" type="text/css">
<title>Adam Sackfield's Portfolio</title>

<script src="scripts/jquery-2.0.3.js"></script>

<script type="text/javascript">
            $(document).ready(function() {
                $("nav a").hover(function() {
                    $(this).stop().animate({
                        opacity: 1
                    }, 300);
                    }, function() {
                    $(this).stop().animate({
                        opacity: 0.3
                    }, 300);
                });
            });
</script>

</head>

<body>

<div id="wrapper">
<header>

    <div id="logo">

        <img src="images/logoarrows.jpg">

    </div><!-- Logo Close -->

    <div id="social">

    </div><!-- Social Close -->

</header>

<nav>
    <a href="#" class="yellow"><p class="yelinner">Home</p></a>
    <a href="#" class="pink"><p class="pinkinner">About Me</p></a>
    <a href="#" class="purple"><p class="purpinner">Portfolio</p></a>
    <a href="#" class="green"><p class="greinner">Contact Me</p></a>     
</nav>

<section>

    <article>

    </article>

    <aside>

    </aside>

</section>

<footer>

</footer>

</div><!-- Wrapper Close -->

</body>
</html>

CSS

*           {
              margin: 0;
              padding: 0;
                                    }


#wrapper    {   
                width: 800px;
                margin-left: auto;
                margin-right: auto;
                background-color: #000000;
                                    }

header      {
                width:1000px;
                height: 220px;


                                    }

#wrapper header #logo {
                width: 400px;
                padding-left: 200px;


                                    }

body        {
              background: #111111;
              color: #FFF;
              font-family:’Open Sans’, sans-serif;
              font-weight: 300;
              font-size: 16pt;
                                    }
a           {
              color: #FFF;
              text-decoration: none;
                                    }

nav         {
              width: 800px;
              margin-top: 60px;
              padding-left: 75px;

                                    }

#wrapper nav a  {
              width: 320px;
              line-height: 320px;             
              display: inline-block;
              margin: 4px;                    
              opacity: 0.3;
              text-align: center;

                                }
.yellow     {       background-image: url(../images/tiles/yellow.jpg);
                    background-repeat:no-repeat;
                      }


.purple     {       background-image: url(../images/tiles/purple.jpg);
                    background-repeat:no-repeat;
                                                   }


.pink       {       background-image: url(../images/tiles/pink.jpg);
                    background-repeat:no-repeat;
                    }

.green      {       background-image: url(../images/tiles/green.jpg);
                    background-repeat:no-repeat; }


亚当·萨克菲尔德的投资组合
$（文档）.ready（函数（）{
$（“导航a”）.hover（函数（）{
$（this）.stop（）.animate({
不透明度：1
}, 300);
}，函数（）{
$（this）.stop（）.animate({
不透明度：0.3
}, 300);
});
});
CSS
*           {
保证金：0；
填充：0；
}
#包装器{
宽度：800px；
左边距：自动；
右边距：自动；
背景色：#000000；
}
标题{
宽度：1000px；
高度：220px；
}
#包装头#标志{
宽度：400px；
左侧填充：200px；
}
身体{
背景:#111111；
颜色：#FFF；
字体系列：'opensans'，Sans serif；
字体大小：300；
字号：16pt；
}
a{
颜色：#FFF；
文字装饰：无；
}
导航{
宽度：800px；
边缘顶部：60像素；
左侧填充：75px；
}
#包装器导航a{
宽度：320px；
线高：320px；
显示：内联块；
保证金：4倍；
不透明度：0.3；
文本对齐：居中；
}
.yellow{背景图像：url（../images/tiles/yellow.jpg）；
背景重复：无重复；
}
.purple{背景图像：url（../images/tiles/purple.jpg）；
背景重复：无重复；
}
.pink{背景图像：url（../images/tiles/pink.jpg）；
背景重复：无重复；
}
.green{背景图像：url（../images/tiles/green.jpg）；
背景重复：无重复；}
您可以使用onClick事件调用javascript或jQuery函数，然后让该函数根据需要更改css或html

<div onClick="yourFunction()"></div>


<script>

function yourFunction(){

//this will change your background color on click

//JS
document.getElementById("divID").style.background ="blue";

//jQuery 
$(".className").css("background-color","yellow");

}


</script>


函数yourFunction（）{
//这将在单击时更改背景色
//JS
document.getElementById（“divID”）.style.background=“蓝色”；
//jQuery
$（“.className”）.css（“背景色”、“黄色”）；
}
供JS参考

对于jQuery

，您可以使用单击事件增加宽度并向其中添加内容

jQuery('body').on('click','nav a',function(){
    jQuery(this).animate({width: "200px"}, 500).append("any-content");
})
你的动机还不清楚，希望这有帮助。



<style>
.dropdownstuff {
    width: 100%;
    height: 100%;
    z-index: 10;
    position:absolute;
    left: 0px;
    top: 0px;
    display:none;
}
.Showstuff {
    display:block !important; 
}
</style>
<script>
$("nav a").onClick(function() {
    n = $(this).attr('class');
    $('.dropdownstuff.Showstuff').removeClass('Showstuff');
    $('.dropdownstuff.'+n).addClass('Showstuff'); 
});

$("a.dropdownhider").onClick(function() {
    $('.dropdownstuff.Showstuff').removeClass('Showstuff');
});
</script>


.滴落凝灰岩{
宽度：100%；
身高：100%；
z指数：10；
位置：绝对位置；
左：0px；
顶部：0px；
显示：无；
}
.展示品{
显示：块！重要；
}
$（“nav a”）.onClick（函数（）{
n=$（this.attr（'class'）；
$（'.dropdownstuff.Showstuff'）.removeClass（'Showstuff'）；
$（'.dropdownstuff.+n）.addClass（'showtuff'）；
});
$（“a.dropdownhider”）.onClick（function（）{
$（'.dropdownstuff.Showstuff'）.removeClass（'Showstuff'）；
});
然后在下拉列表下方或内部有一些div：

<a href="#" class="yellow"><p class="yelinner">Home</p></a>        
<a href="#" class="pink"><p class="pinkinner">About Me</p></a>
<a href="#" class="purple"><p class="purpinner">Portfolio</p></a>
<a href="#" class="green"><p class="greinner">Contact Me</p></a> 

<div class="dropdownstuff yellow"><a href="#" class="dropdownhider">Hide this</a></div>
<div class="dropdownstuff pink"><a href="#" class="dropdownhider">Hide this</a></div>
<div class="dropdownstuff purple"><a href="#" class="dropdownhider">Hide this</a></div>
<div class="dropdownstuff green"><a href="#" class="dropdownhider">Hide this</a></div>
单击链接后，它使用它的类来确定要取消隐藏的div

编辑：现在div将填充屏幕。当你点击链接时，div的内容就会出现在类中。不过，我不确定你到底想要什么样的动画。

你能解释一下怎么做吗。不太了解jQuery，似乎找不到Google查询的正确短语。考虑到这一点，我会为指定的div创建一个单独的类，然后让脚本将该类更改为更大的框。谢谢您的响应。因此，为了在.append（“任何内容”）中明确起见，我可以放置我可能需要的所有html标记，如pul之类。然后在主菜单中添加“后退”按钮？尝试投票支持此答案，但由于声誉太低，因此不允许。@user2682597您可以将答案标记为正确。如果您发现答案正确，您可以添加任何内容、HTML标记或任何您想添加的内容，如果它解决了您的问题，您可以将其标记为答案。这是非常有用的东西，谢谢。对于这个类，我可以让这个div出现在上一页的顶部，或者它会将项目移动到所有地方吗？这个div可以在网站上你想要的任何地方，它们也不需要是
div
s。它们可以是
span
或
a
或
li
。至于他们对你的网站做了什么，可能会发生很多事情，这完全取决于你的css和html布局。从外观上看，你有4个巨大的按钮，你希望每个按钮都能使整个页面覆盖在一个新的屏幕上，对吗？这是完全正确的。因此，是否在左侧设置2个动画，在右侧设置2个动画。或者新页面只是出现在它们的顶部，有点不透明。类似的东西。好的，现在它应该通过用div填充屏幕来工作。单击首页链接，添加显示div的类。当您单击div内的链接时，该类将从所有div中删除（以防万一，但您可以根据需要对其进行自定义）。至于外观和样式，这些都是css。对于动画，您必须使用计时等。你可以代表