Fatal编程技术网

JQuery/Javascript块缩放

javascript jquery

JQuery/Javascript块缩放,javascript,jquery,scale,effect,Javascript,Jquery,Scale,Effect,我有一些潜水舱。我需要调整它的大小。与MacOS dock面板中一样，当图标悬停时。我可以这样做吗？也许是这样的 $("#myDiv").hover( function(){ $(this).css({height : scaled_height, width : scaled_width}); }, function(){ $(this).css({height : original_height, width : original_w

我有一些潜水舱。我需要调整它的大小。与MacOS dock面板中一样，当图标悬停时。我可以这样做吗？

也许是这样的

$("#myDiv").hover(
    function(){
        $(this).css({height : scaled_height, width : scaled_width});
    }, 
    function(){
        $(this).css({height : original_height, width : original_width});
    }
);
也许是这样的

$("#myDiv").hover(
    function(){
        $(this).css({height : scaled_height, width : scaled_width});
    }, 
    function(){
        $(this).css({height : original_height, width : original_width});
    }
);
是的，你可以：

html:

在这里，您可以找到一个使用jQuery制作的类似OSX的dock的好例子： 是的，您可以：

html:

在这里，您可以找到一个使用jQuery制作的类似OSX的dock的好例子：

我从中得到了这个解决方案。感谢作者的加入！我从中找到了链接


悬停时缩放DIV
身体{
字体大小：162.5%；
}
.ToZoomonHover部分{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：200px；
高度：50px；
边缘：1米；
填料：1.2米；
边框：1px纯色灰色；
背景：黄色；
}
让我停下来。我会长大的
$（“.sectionToZoomOnHover”）.hover(
函数（）{
$（this）.stop（）.animate(
{
宽度：360，
身高：100，
背景颜色：“浅蓝色”，
字体大小：“3em”
}
);
}，函数（）{
$（this）.stop（）.animate(
{
宽度：200，
身高：50，
背景颜色：“黄色”，
字体大小：“1em”
}
);
}
);
不幸的是，我还没有弄清楚如何缩放以使DIV的中心点保持原样，这也是我真正想要的效果。

我从中得到了这个解决方案。感谢作者的加入！我从中找到了链接


悬停时缩放DIV
身体{
字体大小：162.5%；
}
.ToZoomonHover部分{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：200px；
高度：50px；
边缘：1米；
填料：1.2米；
边框：1px纯色灰色；
背景：黄色；
}
让我停下来。我会长大的
$（“.sectionToZoomOnHover”）.hover(
函数（）{
$（this）.stop（）.animate(
{
宽度：360，
身高：100，
背景颜色：“浅蓝色”，
字体大小：“3em”
}
);
}，函数（）{
$（this）.stop（）.animate(
{
宽度：200，
身高：50，
背景颜色：“黄色”，
字体大小：“1em”
}
);
}
);
不幸的是，我还没有弄清楚如何缩放以使DIV的中心点保持原样，这也是我真正想要的效果。

通过将
.css（）
语句组合在一起，您可以去掉一半的
$（this）.css（{height:originalHeight，width:originalWidth}）@Mathias Bynens，谢谢你的提示！好的，我改变了我的例子，实际上找到了一篇关于差异的好文章，你可以通过将
.css（）
语句组合在一起来消除它们的一半：
$（this）.css（{height:originalHeight，width:originalWidth}）@Mathias Bynens，谢谢你的提示！好的，我改变了我的例子，实际上找到了一篇关于差异的好文章

$(function(){ /* makes sure your dom is ready */
   $('div.scaleMe').hover(function(){
                       $(this).stop(false, true).animate({width:'50px', height:'50px'}, 1000) /* makes the div big on hover, and .stop() makes sure the annimation is not looping*/
                    },function(){
                       $(this).stop(false, true).animate({width:'20px', height:'20px'}, 600) /* goes back to normal state */
                    })
})



<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Zoom DIV on Hover</title>
        <link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
        <style>
            body{
                font-size:162.5%;
            }
        </style>
        <style>
            .sectionToZoomOnHover {
                display: table-cell;
                text-align: center;
                vertical-align: middle;
                width: 200px;
                height: 50px;
                margin: 1em;
                padding: 1.2em;
                border: 1px solid gray;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="sectionToZoomOnHover">
            Hover me. I'll grow
        </div>

        <script>
            $(".sectionToZoomOnHover").hover(
                function() {
                    $(this).stop().animate(
                        {
                            width: 360,
                            height: 100,
                            backgroundColor: "lightBlue",
                            fontSize: "3em"
                        }
                    );
                }, function() {
                    $(this).stop().animate(
                        {
                            width: 200,
                            height: 50,
                            backgroundColor: "yellow",
                            fontSize: "1em"
                        }
                    );
                }
            );
        </script>
    </body>
</html>