私は立ち往生し、検索し、いじくり回し、コードをビルド/アップグレード/テストし、このサイクルを100回以上繰り返しました。今、私は再び立ち往生しており、どんな種類の助けも本当に感謝しています.
私が達成しようとしていること：
- ホバーするとグラフィックが滑らかに変化し (1->2)、クリックすると変化する (2->3) 検索ボタン。近くにテキスト ボックスがある検索ボタンであるため、type="submit" という形式にする必要がありました。
- JQuery のバックアップ メソッドを統合して、ユーザーが Java を持っていないか、ユーザー側で何かが失敗した場合、.css ブルート レンダリングが引き継ぐようにします。これは可能ですか？
私がなんとかしたこと：
- .CSS (およびすべてのアニメーション状態を含む .png - イメージ スプライト) のみを使用して、送信フォームのボタンのアニメーションを正常に作成しました。
- ボタンの JQuery アニメーションを正常に作成しました (滑らかなフェード イン/アウトを使用しますが、マウス ホバリング部分のみ) - 異なる個別の画像を使用してアニメーションを変更します。
本体スニペット:
<form class="a" method="get" action="search.php">
<input type="text" name="search" size=29 maxlength="255" style="position:relative; vertical-align:middle;">
<input type="submit" name="button-submit" class="search_button" value="" style="border-style: none; vertical-align:middle;">
</form>
スタンドアロン アニメーションで使用される .CSS (JQuery なし):
.a input[name="button-submit"] {
width: 24px;
height: 24px;
background: url('../images/search_button.png') no-repeat 0px 0px;
color: transparent;
border: none;
padding-left: 4px;
}
.a input[name="button-submit"]:hover {
background: url('../images/search_button.png') no-repeat 0px -24px;
color: transparent;
border: none;
padding-left: 4px;
}
.a input[name="button-submit"]:active {
background: url('../images/search_button.png') no-repeat 0px -48px;
color: transparent;
border: none;
padding-left: 4px;
}
JQuery で使用される .CSS:
input.search-button {
background: transparent url(../images/search_normal.png) no-repeat left top;
border: none;
padding: 0;
display: block;
height: 24px;
width: 24px;
text-indent: -9999px;
font-size: 1px;
}
.search-button-wrap {
background: transparent url(../images/search_hover.png) no-repeat left top;
}
そして、検索ボタンをアニメーション化する JQuery:
$(document).ready(function(){
$('input.search-button').wrap('<div class="search-button-wrap" style="display: inline-block; vertical-align: middle;"></div>');
$('input.search-button').hover(function() {
$(this).stop().animate({ // Fade the button out when hovered
'opacity': 0.01
}, 300)
}, function() {
$(this).stop().animate({ // Fade it back in on mouseout
'opacity': 1
}, 300)
});
})
私が立ち往生している場所：
-クリック部分のJQueryでそれを実現することにちょっとこだわっています（ホバリングの背景からクリックされた背景へのアニメーションの変更）。
- また、ユーザーのクライアントで JQuery が機能しない場合のリアルタイム バックアップの方法として、.CSS ブルート アニメーション (フェードイン アウトがない) を JQuery アニメーションに統合することに行き詰まりました。したがって、JQuery アニメーションにエラーがある場合は、純粋な .css アニメーションが作動します。
JQuery アニメーションのプレーンな .css バックアップを統合する方法を知っている人はいますか? それはまったく可能ですか？わからなくても、この検索ボタンで JQuery の .click 関数を機能させる方法を教えてください。(ホバーすると通常の画像からホバー画像に遷移し、クリックするとホバー画像からクリックされた画像に遷移する必要があります)
どうもありがとう！どんな助けでも大歓迎です！