Question

使用此5选项块着陆页，每个块都拥有该类别的自己图像。

目标是让它加载第一个（m1）加载，然后当你鼠标移动到另一个块时，块div将非常快速地闪烁两次，非常数字化，并且在它闪烁时变白。希望这有道理吗？整个div是一个链接，不确定我是否以最好的方式做到了，但它似乎有效！

此外，背景交换，但我希望它们有点“更顺畅”＃34;在通过jQuery交换的背景之间的过渡中。

我甚至不知道我是否正确编写了jQuery，所以也在寻找评论。

非常感谢！这是小提琴：https://jsfiddle.net/da09ewLn/

<div class="cat_bg">
  <div id="m1" class="clickable">
    <a href="link.php"> </a>Option 1</div>
  <div id="m2" class="clickable">
    <a href="link.php"> </a>Option 2</div>
  <div id="m3" class="clickable">
    <a href="link.php"> </a>Option 3</div>
  <div id="m4" class="clickable">
    <a href="link.php"> </a>Option 4</div>
  <div id="m5" class="clickable">
    <a href="link.php"> </a>Option 5</div>
</div>

Answer 1

我更新了您的fiddle并添加了几行jquery和css。

如果您希望通过 jQuery 进行转换。只需添加你的jquery .css()行 transition: all ease-in-out 0.3s; /*0.3s or no. of delays of your choice. */

你的jQuery中的

.css()看起来像这样：

.css({'background-image': 'url(http://i.imgur.com/cyNC3xZ.jpg)', 'transition': 'all ease-in-out 0.3s'})

我建议在css中添加转换，因为它们会很多如果您还希望转换在其他浏览器中运行。

-webkit-transition:all ease-in-out 0.3s;
-moz-transition:all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;

淡化背景过渡和悬停Div效果

1 个答案: