2

ホバー時に画像を180度回転させたいです。画像をクリック/選択すると、元の位置に戻る必要があるときに再度選択するまで、画像をその位置にとどめたいと思います。

ホバーには問題なく機能するが持続しないCSSの組み合わせを試しました。次に、jQueryを使用していくつかの投稿を見つけましたが、見つけた例が非常に基本的であるため、再度選択すると画像が返されるようにするのに十分ではありません。

HTML

<div class="conversionFormE" id="switch1">
  <label class="swapHide">Swap?</label>
  <input type="button" class="rotate" id="switch" name="switch" value="" onclick="switchUnits()"/>
</div>

CSSの一部

.rotate {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;

  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;

  overflow:hidden;
}

.rotate:hover {
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -o-transform:rotate(180deg);
}

助けてくれてありがとう。

編集: 要求に応じて onClick 関数。

function switchUnits(){

//need to get values before swap to and from around.
var from = $("#from").val();
var to = $("#to").val();

//switches the details
$("#to #"+from).attr("selected","selected");
$("#from #"+to).attr("selected","selected");

//gets values after switch
from = $("#from").val();
to = $("#to").val();

//run convert
convertUnits();
}

編集:これが実現されることを非常に望んでいます:クリックする必要なく、ホバー時に画像を回転させて元の位置に戻すことは可能ですか? したがって、次のようになります。

posA では、ホバー、回転、クリック、posB にとどまります。posB でホバーし、元に戻してクリックし、再び posA にとどまります。

4

2 に答える 2

0

次のコードを試してください。

var clicked = 0;
$(".rotate").click(function () {
   clicked++;
   if (clicked == 1) {
       $(this).addClass("stay");
   }
}).bind("mouseout", function () {
    if (clicked == 2) {
        $(this).removeClass("stay").addClass('normal');
        clicked = 0;
    }
});

CSS:

.rotate:hover, .stay {
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}
.normal {
    -webkit-transform:rotate(0deg)!important;
    -moz-transform:rotate(0deg)!important;
    -o-transform:rotate(0deg)!important;
}

例: http://jsfiddle.net/ScSHm/

于 2013-07-15T21:24:41.323 に答える