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_fluxis not with butjQuery元素。

修改后的代码：假设你想$(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 回答