1

我使用 jquery 选项卡作为我的主要导航，我试图通过 css 转换实现的是父背景图片将在 ui 选项卡链接的按钮处于活动状态时更改其大小。所以你点击让我们说'GALLERY' box-bg 背景将动画并保持在活动的链接上。

这是选项卡的 html

<div class="box-bg">
    <div id="box">
        <div id="tabs">
            <ul class="ui-tab-block">
                <li style="height:60px; background:rgba(0,0,0,0.4);"></li>
                <li class="ui-prim-nav"><a href="#home">HOME</a></li>
                <li class="ui-prim-nav"><a href="#gallery">GALLERY</a></li>
                <li class="ui-prim-nav"><a href="#about">ABOUT</a></li>
                <li class="ui-prim-nav"><a href="#contact">CONTACT</a></li>
                <li style="height:170px; background:rgba(0,0,0,0.4);"></li>
            </ul>
        </div>
    </div>
</div>

我的背景

.box-bg{

    background:url(../img/bg_placeholder.jpg) no-repeat;
    background-size: 1000px 666px;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;

    transition: background-size 2s ease-in-out;
    -moz-transition: background-size 2s ease-in-out;
    -web-kit-transition: background-size 2s ease-in-out;
    -o-transition: background-size 2s ease-in-out;
}

我的 CSS 过渡

li.ui-tabs-active a:active .box-bg{
    -webkit-animation-name: bg-size;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: .5s;

    -moz-animation-name: bg-size;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: ease-out;
    -moz-animation-delay: .5s;

    -o-animation-name: bg-size;
    -o-animation-duration: 2s;
    -o-animation-timing-function: ease-out;
    -o-animation-delay: .5s;
}
@keyframes bg-size {
  0% {
      background-size:1000px 666px;
  }
  100% {
      background-size:2000px 1333px;
  }
}
@-webkit-keyframes bg-size {
  0% {
     background-size:1000px 666px;
  }
  100% {
     background-size:2000px 1333px;
  }
}

这是我正在做的事情的JSFIDDLE我现在已经放弃了 css 动画，看看我是否可以用 jquery 来做。

抱歉，它有很多东西要看，但感谢您提前看它。

4

0 回答 0