2

私は Jquery を使用していますが、ホバー イベント中にその場で CSS 値を更新するのに問題があります。基本的に、一番下の小さな線を、長さをdivのサイズに合わせて拡大縮小したいと考えています。

問題のあるコードは次のとおりです。

$('.menu li').hover(function () {
   left = Math.round($(this).offset().left - $('.menu').offset().left);
   //find the current width of the div
   var width_flux = $('.menu #box .head').html($(this).find('img').width());
   //pass value to CSS 
   $('.menu #box .head').css('width', (parseInt(width_flux)) +'px');
   $('#box').stop(false, true).animate({left: left},{duration:500, easing: style}); 

   //if user click on the menu
});

および対応するcss

.menu #box .head {
        background: url("http://whoisedward.com/img/bar.png");
        height:3px;
        width:1px;
        color:#eee;

        /* force text display in one line */
        white-space:nowrap;

        /* set the text position manually */
        padding-left:4px;
        padding-top:3px;
    }
4

3 に答える 3

3

ラインに問題あり

 var width_flux = $('.menu #box .head').html($(this).find('img').width());

width_flux要素ではありませんjQuery。

変更されたコード: 次のように使用する$(this).find('img').width()場合width_flux 

$('.menu li').hover(function () {
    left = Math.round($(this).offset().left - $('.menu').offset().left);
    //find the current width of the div
    var width_flux = $(this).find('img').width();
    //pass value to CSS 
    $('.menu #box .head').width(width_flux);
    $('#box').stop(false, true).animate({left: left},{duration:500, easing: style});    

    //if user click on the menu
})
于 2012-09-28T22:39:21.863 に答える
1

この線

var width_flux = $('.menu #box .head').html($(this).find('img').width());

間違っている。要素に幅を追加しますが、(幅ではなく) 要素が width_flux に割り当てられます。明らかに、<element>px賢明な CSS 値ではありません。

試す：

width_flux = $(this).find('img').width();
$('.menu #box .head').html(width_flux);
$('.menu #box .head').css('width', width_flux + 'px');
于 2012-09-28T22:44:28.873 に答える
1

HTMLに値を設定していて、取得していないようです

var width_flux = $('.menu #box .head').html($(this).find('img').width());

したがって、基本的に width_flux は要素になります..

代わりに試してください

var width_flux = $(this).find('img').width();

   OR 

var width_flux = $('.menu #box .head').html($(this).find('img').width());

   var width_flux = width_flux.html() ;
    // Then your code

エラー状態を確認してください

于 2012-09-28T22:45:13.013 に答える