Question

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

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

<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');

Answer 1

尝试

$(this).children('.rotata').each(function () {
  $(this).fadeOut('slow');
});

Answer 2

我会改变对象的引用。

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

    and

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

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

jQuery变量函数将无法运行

2 个答案: