Question

我正在使用jquery标签作为我的主要导航，而我正在尝试使用css过渡实现的是当ui标签链接的按钮处于活动状态时，父级背景图片将更改其大小。所以你点击让我们说'GALLERY'框-bg背景将动画并保持活跃的链接。

以下是标签的升级版

<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 aniamtion现在看看我是否可以用jquery来做。

很抱歉看到它很多，但感谢您提前查看。

jquery ui tabs active link css parent background transition

0 个答案: