展開文本形式懸停使用jQuery

我有一個引導文字輸入和使用jQuery我想：展開文本形式懸停使用jQuery

展開懸停textform和收回懸停了。 ✓（already done in this jsfiddle）
當textform聚焦/選擇（插入點是內部文本框），的形式展開，並且不縮回上的光標懸停出來。 ✗（被compelted）

的Html

<div class="col-md-3 col-sm-3"> 
    <div class="input-group"> 
    <input class="form-control" placeholder="Search"></input> 
    </div> 
</div>

的Javascript

$(function(){ 
    var form = $('.input-group'); 
    form.mouseenter(function(){ 
    form.animate({ "width": "+=" + form.width() * 1.4}, "slow"); 
    }).mouseout(function(){ 
    form.animate({ "width": '100%'}, "slow"); 
    }); 
});

來源

2013-12-10 Jeremy Lynch

解決http://jsfiddle.net/mY8uU/6/

$(function(){ 
    var form = $('.input-group'), w = form.width(); 
    form.mouseenter(function(){ 
    form.animate({'width': '100%'}, 'slow'); 
    }).mouseout(function(){   
    if(!$('.form-control:focus').length) form.animate({'width': w}, 'slow'); 
    }) 
    $('.form-control').on('blur', function(){ 
    form.animate({'width': w}, 'slow'); 
    }); 
});

來源

2013-12-10 13:00:39 rafaelcastrocouto

jsfiddle似乎沒有工作 –

我看到錯誤...修復它...給我一分鐘...完成 – rafaelcastrocouto

@ Neto的解決方案也可以，但這更簡潔，所以正確的答案就交給你了。 Thankyou –

這個工作對我來說：

$(function(){ 
    var form = $('.input-group'); 
    form.mouseenter(function(){ 
    form.animate({ "width": form.width() * 1.8}, "slow"); 
    }).mouseout(function(){ 
    form.animate({ "width": form.width()/1.8}, "slow"); 
    }); 
});

的jsfiddle：http://jsfiddle.net/mY8uU/2/

來源

2013-12-10 12:55:55

這將在這個特定的情況下工作，但如果由於某種原因寬度被進一步改變，除以1.8可能不是正確的計算。只是一個擡頭:)（這絲毫沒有錯，所以不要把這當作批評大聲笑） –

謝謝@RUJordan，但我希望他有足夠的創造力來完成剩餘的工作本身:)只是嘗試給一些「工作投入」:) –

這不會做我以後的事情。當選擇文本形式（即插入點在文本框內）時，懸停出局應該不起作用，但是如果未選中，則可以進行懸停操作。 –

試試這個

$(function(){ 
    var form = $('.input-group'); 
    var start_width = form.width(); 

    form.find('#input-target').mouseenter(function(){ 
    form.animate({ "width": "+=" + start_width * 1.4}, "slow"); 
    }).mouseout(function(){ 
    form.animate({ "width": start_width+'px'}, "slow"); 
    }).focus(function(){ 
     $(this).unbind('mouseout'); 
     $(this).unbind('mouseenter'); 
    }).blur(function(){ 
     form.animate({ "width": start_width+'px'}, "slow"); 
     $(this).mouseout(function(){ 
     form.animate({ "width": start_width+'px'}, "slow"); 
     }).mouseenter(function(){ 
    form.animate({ "width": "+=" + start_width * 1.4}, "slow"); 
     }); 
    }); 
});

請參閱本 http://jsfiddle.net/ZQ3nZ/

來源

2013-12-10 13:08:28 Neto

這是非常接近我所尋找的，但有一個錯誤。當選擇的hoverin仍然可以使輸入變得越來越長 –

如果你刪除'+'px''，我認爲它應該可以工作 –

哦，你也可能想解除綁定（）mouseenter，否則它會一直增長，直到它失去了重點。 –

你總是可以使用一些CSS3：

input#search { 
    transition: width .5s; 
    -webkit-transition: width .5s; 
} 
input#search:hover, input#search:focus { width:300px; }

來源

2013-12-10 13:24:03 Kippie

CSS3出了問題嗎？

在這種情況下，你可以不用JavaScript和使用

.textbox{ 
    width: 200px; 
    transition: width 1S; 
} 

.textbox:hover 
{ 
    width:250px; 
    transition: width 1S; 
}

這只是一個例子，但可以將其更改爲自己的喜好。

來源

2013-12-10 13:24:32 PatrikS

展開文本形式懸停使用jQuery

回答

相關問題