JQuery изменение ширины ввода при наведении и фокусе без очереди

Я хочу, чтобы мой вход изменял ширину при наведении или фокусировке и изменял ее после ухода из фокуса и зависания.JQuery изменение ширины ввода при наведении и фокусе без очереди

$(document).ready(function() { 
 

 
    $("#tbRegex").hover(function() { 
 
    $(this).stop(true, false).animate({ 
 
     width: "200px" 
 
    }); 
 
    }, function() { 
 
    $(this).stop(true, false).animate({ 
 
     width: "40px" 
 
    }); 
 
    }); 
 

 
    $("#tbRegex").focus(function() { 
 
    $(this).stop(true, false).animate({ 
 
     width: "200px" 
 
    }); 
 
    }); 
 

 
    $("#tbRegex").blur(function() { 
 
    $(this).stop(true, false).animate({ 
 
     width: "40px" 
 
    }); 
 
    }); 
 

 
});

#tbRegex{width:40px;}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <input id="tbRegex" type="text" placeholder="Text" /> 
 
    </body> 
 

 
</html>

, но я не знаю, как сказать, что фокус и парить должны быть оставлены.

источник

2015-01-31 Zuyas

Вы можете использовать атрибуты, как, например, «isfocusedin» и установите его в 1, при наведении курсора мыши, что Вы можете Fisrt проверку, которые сосредоточены не 1

<input id="tbRegex" type="text" placeholder="Text" ishoveredin="0" isfocusedin="0" />

В парении из

if($(this).attr("isfocusedin")!=1) 
    $(this).stop(true, false).animate({ 
     width: "40px" 
    });

Рабочая демо:

$(document).ready(function() { 
 

 
    $("#tbRegex").hover(function() { 
 
    $(this).attr("ishoveredin",1); 
 
    $(this).stop(true, false).animate({ 
 
     width: "200px" 
 
    }); 
 
    }, function() { 
 
    $(this).attr("ishoveredin",0); 
 
    if($(this).attr("isfocusedin")!=1) 
 
    $(this).stop(true, false).animate({ 
 
     width: "40px" 
 
    }); 
 
    }); 
 

 
    $("#tbRegex").focus(function() { 
 
    $(this).attr("isfocusedin",1); 
 
    $(this).stop(true, false).animate({ 
 
     width: "200px" 
 
    }); 
 
    }); 
 

 
    $("#tbRegex").blur(function() { 
 
    $(this).attr("isfocusedin",0); 
 
    $(this).stop(true, false).animate({ 
 
     width: "40px" 
 
    }); 
 
    }); 
 

 
});

#tbRegex{width:40px;}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <input id="tbRegex" type="text" placeholder="Text" ishoveredin="0" isfocusedin="0" /> 
 
    </body> 
 

 
</html>

источник

2015-01-31 14:55:53

спасибо :) именно то, что я хотел – Zuyas

здорово это услышать :) –

JQuery изменение ширины ввода при наведении и фокусе без очереди

ответ

Смежные вопросы