0

我试图在 HTML 中制作盒子，如果你将鼠标悬停在它们上面，盒子中的图标会在淡出时旋转，并且在它的位置另一个 img 淡入，但不会旋转。好吧，我让它工作了，但是有很多代码我试图制作一个函数，所以我有更少的代码。我一直无法找到这个问题的答案，这里是代码。我想要的是

http://jsfiddle.net/SSZVN/

如果您只需要告诉我，这是代码：

<div id="info-boxes">
  <div class="box b-one">
    <span class="rotate">
      <center><img src="images/house.png" alt="" title="Stability" class="rotata" /></center>
      <center><img src="images/house-h.png" alt="" title="Stability" class="rotati" /></center>
    </span>
    <h2>Stable & Secure</h2>
    <p>Lorem ipsum dolor sit amet,consectetura
      dipiscing elit. Donec porta diam
      massa. Fusce molestie nisl in posuere 
      fermentum.</p>
    <center><a href="#" class="button-blue">More Info</a></center>
  </div>
  <div class="box b-two">
    <span class="rotate">
      <center><img src="images/note.png" alt="" title="Realiablity" class="rotata" /></center>
      <center><img src="images/note-h.png" alt="" title="Realiablity" class="rotati" /></center>
    </span>
    <h2>Reliable Information</h2>
    <p>Lorem ipsum dolor sit amet,consectetura
      dipiscing elit. Donec porta diam
      massa. Fusce molestie nisl in posuere 
      fermentum.</p>
    <center><a href="#" class="button-green">More Info</a></center>
  </div>
  <div class="box b-thr">
    <span class="rotate">
      <center><img src="images/power.png" alt="" title="Savability" class="rotata" /></center>
      <center><img src="images/power-h.png" alt="" title="Savability" class="rotati" /></center>
    </span>
    <h2>Power Saver</h2>
    <p>Lorem ipsum dolor sit amet,consectetura
      dipiscing elit. Donec porta diam
      massa. Fusce molestie nisl in posuere 
      fermentum.</p>
    <center><a href="#" class="button-red">More Info</a></center>
  </div>
</div>

jQuery：

var spinMe = function(nameSpin) {
    $(nameSpin).hover(
        function() {
            $(this).children('.rotata').fadeOut('slow');
        }, function() {
            $(this).children('.rotata').fadeIn('slow');
        }
    );
    $(nameSpin).hover(
        function() {
            $(this).hasClass('.rotati').fadeIn('slow');
        }, function() {
            $(this).hasClass('.rotati').fadeOut('slow');
        }
    );
};
spinMe('#info-boxes .box');
4

2 回答 2

0

尝试

$(this).children('.rotata').each(function () {
  $(this).fadeOut('slow');
});
于 2013-09-07T20:36:20.493 回答
0

我会改变 obj 的引用。

    $(this).find('img.rotata').fadeOut('slow').fadeIn('slow');

    and

    $(this).find('img.rotati').fadeIn('slow').fadeOut('slow');

不过，我不得不从你的小提琴中删除你的一些 JS 代码（当然没有保存），因为我遇到了阻止你的旋转代码工作的 JS 错误。一旦我删除了该问题，这些引用对于您想要旋转的元素是不正确的。所以我把它改成了上面的。

于 2013-09-07T21:04:38.077 回答