jQuery - проблем с анимация при zoom на браузъри

[georgirgeorgiev]

Имам два елемента.
Единият е <input />, другият е <i>.
На <i> елемента съм му сложил за фон картинка.
<input /> елемента съм го позиционирал да е зад <i> елемента, и съм му сложил свойството "width: 0".
Приложил съм анимация, която при кликване върху <i> елемента, на <input /> елементът да бъде приложено свойството "width: 210px".
При всички браузъри в нормалното им състояние, кода работи коректно. Обаче когато увелича размера на страницата чрез zoom или намаля размера й, анимацията спира да работи при Chrome, Mozilla  и Opera, от тези браузъри, които пробвах, единствено при браузъра Internet Explorer работи този код.
Имате ли представа защо при другите браузъри не работи jQuery кодът при zoom?

Картинката е #search-image.
Инпутът е #search.

Код: Javascript

1. var searchInput = $('#search');
2.  
3. $('#search-image').click(function(){
4.         if (searchInput.css('width') === '0px') {
5.                 searchInput.animate({'width': '210px'}, 300).focus();
6.         } else {
7.                 searchInput.animate({'width': '0'}, 300);
8.         }
9. });

[Avalanche]

Направи fiddle да може да видим какво се случва. Аз съм заредил jQuery в този и съм поставил JS кода, добави HTML и CSS-а да може да възпроизведем проблема в изолирана среда. http://jsfiddle.net/u5fpr1mh/ - цъкаш update и ти ъпдейтва линка.

[georgirgeorgiev]

Направи fiddle да може да видим какво се случва. Аз съм заредил jQuery в този и съм поставил JS кода, добави HTML и CSS-а да може да възпроизведем проблема в изолирана среда. http://jsfiddle.net/u5fpr1mh/ - цъкаш update и ти ъпдейтва линка.

Благодаря ти много за труда, който положи. БОГ да те благослови и пази.

Не съм се опитвал да го направя красиво, само за примера го настроих. Ако някой поиска, може да пробва да увеличи или смали размера на страницата със Ctrl + скрола на мишката назад / Ctrl + скрола на мишката напред, след което да цъкне върху лупичката и резултата ще бъде, че текството поле няма да се уголеми. Обаче когато няма zoom, и браузъра си е на нормалните 100% zoom, при кликване върху картинката с лупата, текството поле се удължава и смалява при последващо кликане.

[Avalanche]

Първо - ползвай табулации от 4 space-а, 8 са за Java.
Второ - ползвай console.log за да дебъгваш - ще ти спести много главоболия
Трето:

Код: Javascript

1. searchInput.css('width') === '0px'

Това е много кофти написано, елементите променят размера си при приближаваме или разделечаване и няма как да бъдат 0 пиксела. Ето и доказателството



Решение - първото което ми дойде до главата беше да ползвам parseInt - който ще направи всички нецелочислени стойности на 0, което в случая ни устройва:

Код: Javascript

1. var searchInput = $('#search');
2.  
3. $('#search-image').click(function(){
4.     var width = parseInt(searchInput.css('width'));
5.  
6.     if (width === 0) {
7.         searchInput.animate({'width': '210px'}, 300).focus();
8.     } else {
9.         searchInput.animate({'width': '0'}, 300);
10.     }
11. });
12.  

Демо - http://jsfiddle.net/u5fpr1mh/12/



П.п. Това няма да работи перфектно на всякъде, сега се сетих че всъщност съм го борил този проблем за индекса на научи.ме, използвал съм event-и:

Код: Javascript

1. $(document).ready(function() {
2.         $('#main-search-input').focus(function() {
3.         $(this).animate({ width: '250px' }, { queue: false } )
4.     });
5.     $('#main-search-input').focusout(function() {
6.         $(this).animate({ width: '85px' }, { queue: false } )
7.     });
8. });

[georgirgeorgiev]

Благодаря ти много!!!
Значи това е бил проблема, че при зуумване елемнтите се уголемяват. Въобще не бях се сетил за това.
По-късно ще прегледам детайлно двата блока от код, които си дал и изглежда вторият блок (с евентите) ще го сложа на мястото на стария код.
Благодаря ти отново за това, че отдели от времето си да ми помогнеш. Благодаря ти също така за съветите. Не се сетих в тази ситуация да пробвам със console.log() щеше да бъде доста добра идея, както ти си направил. БОГ да те пази.