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

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 に答える