JQuery 用户界面 : Part of a negative margins image disappears if I animate it

标签 jquery jquery-ui css png

我正在使用 JQuery UI 制作动画。

我有一个图标，我想突出 div 的边缘，所以我使用负边距。

动画会调整 div 的大小并更改背景颜色。

但是，当我为 div 设置动画时，div 之外的图像区域(在负边距中)会在动画持续期间消失。

我已经调查过了，问题似乎出在 div 的大小调整上，而不是颜色变化或边距变化。例如。这取决于动画 CSS 宽度属性。

我也试过更改相关的 CSS 属性。比如固定图片的宽度，设置display: block，使用position: absolute，都没有用。

以前有人遇到过这个问题吗？

链接在这里:

Brightwide Test

注意:目前在开发中，根本没有在 IE 中测试过。

代码在这里:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Act Now</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="application/javascript" language="javascript">
$(document).ready(function() {


/* Act Now Page - sponsor section mousover effect */
$('#an-sponsors').hover(
 function () {
   $(this).children().children('ul').animate({backgroundColor: "#E8F0E5", webkitBoxShadow: "2px 2px 6px rgba(212,212,212,1)", MozBoxShadow: "2px 2px 6px rgba(212,212,212,1)"}, {queue:false,duration:500});
 }, function () {
   $(this).children().children('ul').animate({backgroundColor: "#fff", webkitBoxShadow: "2px 2px 6px rgba(212,212,212,0)", MozBoxShadow: "2px 2px 6px rgba(0,0,0,0)"}, {queue:false,duration:500});
 });

/* Expanding boxes */
  $('.fadeThis').hover(
 function () {
  $(this).animate({backgroundColor: "#E8F0E5", marginLeft: "-1%", width: "31%", paddingBottom: "25px"}, {queue:false,duration:500});
   $(this).children().children('li').animate({paddingRight:"30px"}, {queue:false,duration:500});
   $(this).children().children('.alt').animate({backgroundColor: "#DAEAD3"}, {queue:false,duration:500});
   $(this).children('h3').animate({backgroundColor: "#68B744"}, {queue:false,duration:500});
 }, function () {
   $(this).animate({backgroundColor: "#fff", marginLeft: "0", width: "29%", paddingBottom: "10px"}, {queue:false,duration:500});
   $(this).children().children('li').animate({paddingRight:"10px"}, {queue:false,duration:500});
   $(this).children().children('.alt').animate({backgroundColor: "#f2f2f2"}, {queue:false,duration:500});
   $(this).children('h3').animate({backgroundColor: "#666"}, {queue:false,duration:500});
 });



  $('.fadeThis2').hover(
 function () {
   $(this).animate({backgroundColor: "#E8F0E5", marginLeft: "-1%", width: "31%", paddingBottom: "25px"}, {queue:false,duration:500});
   $(this).children().children('li').animate({paddingRight:"30px"}, {queue:false,duration:500});
   $(this).children().children('.alt').animate({backgroundColor: "#DAEAD3"}, {queue:false,duration:500});
   $(this).children('h3').animate({backgroundColor: "#68B744"}, {queue:false,duration:500});
 }, function () {
   $(this).animate({backgroundColor: "#fff", marginLeft: "0", width: "29%", paddingBottom: "10px"}, {queue:false,duration:500});
   $(this).children().children('li').animate({paddingRight:"10px"}, {queue:false,duration:500});
   $(this).children().children('.alt').animate({backgroundColor: "#f2f2f2"}, {queue:false,duration:500});
   $(this).children('h3').animate({backgroundColor: "#666"}, {queue:false,duration:500});
 });


  /* Tabs  */
/* Credit: http://www.viget.com/inspire/fun-with-jquerys-animation-function/ */

var navDuration = 150; //time in miliseconds
      var navJumpHeight = "0.45em";

      $('#tabs li').hover(function() {
          $(this).animate({top : "-="+navJumpHeight }, navDuration);  
    $(this).children('a').animate({borderColor: "#DAEAD3", backgroundColor: "#E8F0E5" }, navDuration);  
      }, function() {
          $(this).animate({ top : "15px" }, navDuration);
    $(this).children('a').animate({borderColor: "#ddd", backgroundColor: "#fff" }, navDuration); 
      });

});








/* IDEA .. have the "act" element pulsate periodically to draw attention to itself */

</script>
<style>

/* temp */

body {
 background:url(assets/header.jpg) repeat-x center top #f7f7f7;
 margin: 180px 0 0 0;
}


/* end temp */

.an {
 max-width: 1000px;
 min-width: 770px;
 _width: 960px;
 margin: 0 auto;
 font-size: 90%;
 font-family: Helvetica, Arial, sans-serif;
}

.an ul {
 margin: 0;
 padding: 10px 0 10px 15px;
}

.an li {
 list-style: none;
 background: url(assets/arrow.png) no-repeat 0 7px;
 margin: 0;
 padding: 3px 0 3px 15px;
}

.an a {
 color: #0E7FC1;
}

.an a:hover {
 text-decoration: none;
}

#an-details {
 width: 58%; 
 float: left;
 font-size: 95%;
}

#an-details p {
 margin: 0 0 5px 0;
}

#an-details .casual {
 margin: 10px 0 5px 0;
}

#an-details h1 {
 margin: 10px 0;
 font-size: 130%;
 padding-left: 15px;
 display: inline;
 line-height: 2;
}

#an-sponsors {
 padding-left: 40px;
 width: 35%; 
 float: right;
 background: url(assets/divider.jpg) no-repeat;
 min-height: 350px;
 _height: 350px;
}

#an-sponsors ul {
 width: 290px;
 background: #fff;
 border: 2px solid #fff;
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
}

#an-sponsor {
 display: block;
 overflow: hidden;
 background-repeat: no-repeat;
 background-position: center;
 text-indent: -9000px;
 width: 290px;
}

#an-film-still {
 float: left;
 margin: 0 15px 20px 0;
 width: 240px;
}

#an-description {
 clear: both;
 line-height: 1.4;
}

#an-description .standfirst {
 font-size: 120%; 
}

#an-director span, #an-distributor span, #an-year span {
 font-weight: bold;
 padding-left: 15px;
}

#an-act-now {
 clear: both;
}

#an-dp {
 font-weight: bold;
}

#an-dp span {
 font-weight: normal;  
}

#an-friends {
 clear: both;
 padding-top: 40px;
 font-size: 130%;
}

.fadeThis, .fadeThis2 {
 width: 29%;
 float: left;
 margin-right: 5%;
 background: #fffffff;
 border: 2px solid #fff;
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 -moz-box-shadow: 2px 2px 6px rgba(212,212,212,1);
 -webkit-box-shadow: 2px 2px 6px rgba(212,212,212,1);
}


.fadeThis h3, .fadeThis2 h3 {
 font-size: 110%;
 margin: 0;
 padding: 5px 10px;
 background: #666;
 color:#FFF;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-topleft: 5px;
 -webkit-border-top-right-radius: 5px;
 -webkit-border-top-left-radius: 5px;
}

.fadeThis2 {
 margin-right: 0; 
}

.ico {
 float: left;
 margin: -10px 10px 0 -10px;

}

ul.conversation li span {
 font-size: 80%;
 color: #999;
 display: block;
}


ul.conversation {
 list-style: none;
 padding: 0;
 margin: 0;
}

ul.conversation li {
 background-repeat: no-repeat;
 background-position: 10px 15px;
 min-height: 65px;
 list-style: none;
 padding: 10px 10px 10px 55px;
 margin: 0;
 background-image: none;
}

.fadeThis ul li.alt, .fadeThis2 ul li.alt {
  background-color: #f5f5f5;
}

#an-act-now form textarea {
 width:100%;
 height: 100px;
}

#an-share {
 clear: both;
 padding: 0;
}

.fadeThis, .fadeThis2 {
 padding-bottom: 10px;
}

.casual {
 font-family: "Sean";
 color: #666;
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
}

#an-sponsors .casual {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
}

.conversation li h4 {
 font-size: 100%;
 font-weight: normal;
 font-family: "Sean";
 color: #666;
 margin: 0;
}

.conversation li h4 a {
 text-decoration: none;
 color: #666;
}

.conversation li h4 a:hover {
 text-decoration: underline;
 color: #0E7FC1;
}





/* nav1 */
.an #tabs {
 height: 3em;
 overflow: hidden;
 padding: 0;
 margin: 30px 0 0 0;
 float: left;
 list-style: none;
 position: relative;
 clear: both;
}
.an #tabs li, .an #tabs li a {
 position: relative;
 float: left;
}      
.an #tabs li { top: 15px; margin: 0 1px 0 0; background: none; padding: 0; }
.an #tabs li a {
 display: block;
 padding: 0.4em 1.1em;
 background: #fff;
 border: 1px solid #ddd;
 border-bottom: none !important;
 color: #333;
 text-decoration: none;
 height: 195px;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-topleft: 5px;
 -webkit-border-top-right-radius: 5px;
 -webkit-border-top-left-radius: 5px;
}



</style>
<body>

<div class="an">
 <div id="an-details">
     <img src="assets/screenshot-ml.jpg" alt="Still from McLibel" id="an-film-still" />
        <p class="casual">You have been watching...</p>
        <h1>McLibel</h1>
     <p id="an-director"><span>Director:</span> Franny Armstrong</p>
        <p id="an-distributor"><span>Distributor:</span> Spanner Films</p>
        <p id="an-year"><span>Released:</span> 1999</p>


     <div id="an-description">
         <p class="standfirst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at scelerisque leo. Nullam elementum turpis id dui hendrerit eget auctor risus convallis. Aliquam erat volutpat.</p> 

            <p>Curabitur cursus, eros feugiat convallis vestibulum, diam justo aliquam arcu, sed placerat ipsum est at nisi. Donec metus mauris, fermentum et vehicula vel, euismod ut sem. Ut et tortor eget elit imperdiet gravida eget ac dolor. Ut mattis purus et mi commodo sed lacinia tellus egestas. </p>

            </div>
 </div>
    <div id="an-sponsors">
     <div id="an-sponsors-main">
         <p class="casual">This film was supported by the lovely people at...</p>
         <h2 id="an-sponsor" style="background-image: url(assets/wwf_logo.jpg); height: 150px;">WWF</h2>
            <ul>
             <li><a href="#">Join WWF</a></li>
                <li><a href="#">Give WWF some money</a></li>
                <li><a href="#">Sign a petition</a></li>
            </ul>
        </div>
    </div>

    <div id="an-act-now">
     <h2 id="an-dp"><span class="casual">Don't Panic!</span> Take Action</h2>

     <div id="an-talk" class="fadeThis">
         <img src="assets/icon-1.png" alt="#" class="ico" />
            <h3>Talk</h3>
            <ul>
             <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
            </ul>
        </div>

        <div id="an-think" class="fadeThis">
         <h3>Think</h3>
            <ul>
             <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
            </ul>
        </div>

        <div id="an-act" class="fadeThis2">
         <h3>Act</h3>
            <ul>
             <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
            </ul>
        </div>

        <h2 id="an-friends">Here's what your friends are saying...</h2>

        <div id="an-social-1" class="fadeThis">
         <h3>Twitter</h3>
            <ul class="conversation">
             <li style="background-image:url(assets/av1.jpg)"><h4><a href="#">Joanna said...</a></h4>
                Just watched OilSpill. OMG, that is terrible. How can people do things like that? They should ban it. #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li class="alt" style="background-image:url(assets/av2.jpg)"><h4><a href="#">Rich Quick said...</a></h4>
                Just watched OilSpill.  Am so angry. Why would people behave like this? #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li style="background-image:url(assets/av3.jpg)"><h4><a href="#">Oli Best said...</a></h4>
                <a href="#">richquick</a> I see what you mean.  It's a discgrace. #brightwide
    <span>at 3pm on Nov 17th</span></li>
            </ul>
        </div>

        <div id="an-social-2" class="fadeThis">
         <h3>Facebook</h3>
            <ul class="conversation">
             <li style="background-image:url(assets/av1.jpg)"><h4><a href="#">Joanna said...</a></h4>
                Just watched OilSpill. OMG, that is terrible. How can people do things like that? They should ban it. #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li class="alt" style="background-image:url(assets/av2.jpg)"><h4><a href="#">Rich Quick said...</a></h4>
                Just watched OilSpill.  Am so angry. Why would people behave like this? #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li style="background-image:url(assets/av3.jpg)"><h4><a href="#">Oli Best said...</a></h4>
                <a href="#">richquick</a> I see what you mean.  It's a discgrace. #brightwide
    <span>at 3pm on Nov 17th</span></li>
            </ul>
        </div>

        <div id="an-social-3" class="fadeThis2">
         <h3>Comments</h3>
            <ul class="conversation">
             <li style="background-image:url(assets/av1.jpg)"><h4><a href="#">Joanna said...</a></h4>
                Just watched OilSpill. OMG, that is terrible. How can people do things like that? They should ban it. #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li class="alt" style="background-image:url(assets/av2.jpg)"><h4><a href="#">Rich Quick said...</a></h4>
                Just watched OilSpill.  Am so angry. Why would people behave like this? #brightwide
    <span>at 3pm on Nov 17th</span></li>
                <li style="background-image:url(assets/av3.jpg)"><h4><a href="#">Oli Best said...</a></h4>
                <a href="#">richquick</a> I see what you mean.  It's a discgrace. #brightwide
    <span>at 3pm on Nov 17th</span></li>
            </ul>
        </div>


        <ul id="tabs">
         <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Comment</a></li>
            <span id="nav_move"></span> 
        </ul>
        <form action="#" method="post" id="an-share">
   <textarea>Join the conversation...</textarea>
            <button>Say it</button>     
        </form>
    </div>
</div>

</body>
</html>

最佳答案

只是想在此处和 Boagworld 上添加回复。

问题在于 jQuery 在执行动画时设置 overflow:hidden;。您的问题有两种解决方案:

(1) 在样式表中设置overflow:visible;。如果 jQuery 仍然覆盖它，您可以添加 !important。我不知道这是否会扰乱 jQuery 动画的方式，它可能会搞砸某些浏览器，但值得一试。

(2) 将您正在制作动画的 DIV 包装在另一个 DIV 标签中。为内部 DIV 提供足够的填充以容纳图标，然后为外部 DIV 标签设置动画。此选项添加了更多标记，但它不会干扰 jQuery 的工作方式，因此如果第一个选项出现错误，它保证可以正常工作。

关于JQuery 用户界面 : Part of a negative margins image disappears if I animate it，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1782553/

上一篇：css - 哪些操作系统包含(即默认安装)哪些字体？

下一篇：css - 清除嵌套的 float

相关文章：

javascript - 在 ajax 调用的脚本中调用 ajax 未正确运行 (PHP)

javascript - jquery 自动完成验证输入的值

jquery-ui - 如何确定 jQuery toggle() 的当前状态

css - Firefox 意外换行使用 float 和溢出隐藏

Jquery UI - 可在 Div 之间而不是在 Div 内排序

javascript - 使 Highcharts 看起来像具有多个系列的进度条

jquery - 单击 HTML 即可找到相应的 jQuery 代码

jquery - jquery 函数中的 IF 条件

javascript - jQueryUI 滑动效果 - Divs 堆叠

javascript - 使用 jQuery 在另一个 div 中克隆一个 div

©2024 IT工具网  联系我们