2017-04-24 3 views
0

私はフクロウカルーセル2を使用しています。 マウスが終了したら、Owl-Stageを右に変換したいと思います。 これはCSSで動作します。jQueryで変換が機能しない

.owl-stage:hover { 
    -webkit-transform: translate3d(-1280px, 0, 0) !important; 
    transform: translate3d(-1280px, 0, 0) !important; 
    transition: 450ms transform, 450ms -webkit-transform; 
} 

translate3d値(-1280px)は、owlカルーセルによって動的に変更されるため、 jQueryで確認する必要があります。

$('.owl-stage').hover(function() { 
     console.log('stage overed'); 

     normalanimation = $(this).css('transform').split(',')[4]; 
     var animation = parseInt(normalanimation) + (-112); 
     console.log(animation); 
     //$(this).transition({ x: '-40px' }); 
     $(this).css({ "transform": "translate3d(" +animation+ "px, 0, 0) !important;", "transition": "transform 450ms"}); 
    }); 

私はこのようなスタイルのatrrを他に多く使用しました。運がない。 jQueryはCSS変換をサポートしていませんか?

+0

あなたはトグルクラスの代わりに、インラインスタイルを使用してみてくださいことはできますか? http://api.jquery.com/toggleclass/ –

+0

'アニメーション'はコンソールで何をプリントアウトするのですか? DOM属性には何が表示されますか? – Justinas

+0

@SyedFarhan translate3dの値は、ナビゲーションボタンをクリックするかアイテムをドラッグすると、owlカルーセルによって動的に設定されるため、トグルクラスは使用できません。 – taymyinl

答えて

0

.css()メソッドを使用することはできません。"!important" jQueryは正しく解釈しないため無視されます。

てみ更新.ATTR()メソッドを使用して代わりに

$(this).attr("style", "transform:translate3d(" +animation+ "px, 0, 0)!important; transition:transform 450ms"); 
+0

ありがとうございます。 owl-stageの元の属性を上書きします。変換値のみを変更することは可能ですか? – taymyinl

+0

さて、まず既存のスタイルを取得し、新しいスタイルを追加してください。例:$(this).attr( "style"、$(this)).attr( "style")+ "; transform:translate3d(" +アニメーション+ "px、0、0) ); – partypete25

+0

解決に感謝します。できます。 – taymyinl

関連する問題